Работы на конкурс «Задание по CSS»

mrnobody · November 19, 2013

Радиоволны

Задача:
С помощью HTML и CSS-анимации (@keyframes) создать радиоволны, идущие от антенны на 300px (600px/2) c интервалом в 2 секунды.

HTML-код:
<div class="radio-wave"></div><div class="radio-wave"></div><div class="radio-wave"></div><div class="antenna">  <div class="antenna-point"></div></div>
Радиоволна:
Максимальный диаметр волны 600px;
Распространение волны 6 секунд;
Интервал между волнами 2 секунды;
Цвет фона радиоволны #b7e7f7 (можно задать цвет по своему усмотрению);
К концу анимации волна затухает (постепенно исчезает).
Антенна:
Ширина антенны 4px, цвет фона #8d8d8d (можно задать цвет по своему усмотрению);
Диаметр наконечника 24px, цвет фона #5E5E5E с белым бликом 5×5px (блик по желанию).
Поддержка браузерами:
В современных браузерах Firefox, Chrome, Opera 12+.
Должно корректно отображаться в IE10;
Решение:
http://jsfiddle.net/mrnobody/BXs8n/
Фуллскрин — http://jsfiddle.net/mrnobody/BXs8n/embedded/result/
GIF анимация:
http://img268.imageshack.us/img268/7871/uy6.gif

Время

Задача:
Основная — используя CSS-анимацию, сделать мигающий разделитель (двоеточие);
Второстепенная — сделать свечение цифр и разделителя;
Цвет, размер и время можете задать на ваше усмотрение.
HTML-код:
<div class="time">13<span>:</span>47</div> 
Выберите один из вариантов подключения шрифта (Quantico):
Внутри элемента <head>
<link href='http://fonts.googleapis.com/css?family=Quantico:700''>http://fonts.googleapis.com/css?family=Quantico:700' rel='stylesheet' type='text/css'>
В начале CSS-файла
@import url(http://fonts.googleapis.com/css?family=Quantico:700);
Поддержка браузерами:
В современных браузерах Firefox, Chrome, Opera 12+.
Должно корректно отображаться в IE10;
Решение:
http://jsfiddle.net/mrnobody/vSRMD/
Фуллскрин — http://jsfiddle.net/mrnobody/vSRMD/embedded/result/
GIF анимация:
http://img163.imageshack.us/img163/4030/argr.gif

Часы

Задача:
Сделать простые часы с идущими стрелками используя HTML-разметку (расположенную ниже) и CSS-анимацию. Для наглядности можно увеличить скорость движения стрелки (как сделано в примере).
Диаметр часов 300px, размеры стрелок и шрифта на ваш вкус
HTML-код:
<div class="clock">  <span class="time time-top">12</span>  <span class="time time-right">3</span>  <span class="time time-bottom">6</span>  <span class="time time-left">9</span>  <div class="hand hand-hours"></div>  <div class="hand hand-minutes"></div>  <div class="hand hand-seconds"></div></div>
Поддержка браузерами:
В современных браузерах Firefox, Chrome, Opera 12+.
Должно корректно отображаться в IE10;
Решение:
http://jsfiddle.net/mrnobody/tSav3/1/
Фуллскрин — http://jsfiddle.net/mrnobody/tSav3/1/embedded/result/
GIF анимация:
http://img7.imageshack.us/img7/6240/a0m7.gif

Edited November 27, 2013 by mrnobody

iKNG · November 19, 2013

Стильная кнопка

Текст со скриншотами:

Требуется создать кнопку (рис. 1). 1 - обычный вид кнопки; 2 - при наведении курсора. Так же необходимо, чтобы она отображалась одинаково и на теге a, и на теге input.

Рис. 1

Исходный код:
<!DOCTYPE html><html>  <head>    <title>Кнопка</title>    <style type="text/css">    </style>  </head>  <body>    <a class="button">Ссылка</a>    <input type="submit" class="button" value="Input">  </body></html>
Разрешено изменять только содержимое тега style. При том запрещено использовать изображения.

Решение:

http://jsfiddle.net/iKNG/2vRsf/1/

http://jsfiddle.net/iKNG/2vRsf/embedded/result/

.button {    padding: 5px;    margin: 15px;    box-sizing: border-box;    -moz-box-sizing: border-box;    box-shadow: inset 0 0 2px 1px #FFFFFF;    background: -moz-linear-gradient(top, #FFFFFF 0%, #F2F2F2 50%, #DDDDDD 51%, #FFFFFF 100%);    background: -webkit-linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: -o-linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: linear-gradient(top, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    border: 1px solid #F2F2F2;    border-radius: 3px;    color: #000000;    font-family: Verdana, sans-serif;    font-size: 12px;    font-weight: 100;}.button:hover {    background: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 50%, #DDDDDD 51%, #FFFFFF 100%);    background: -webkit-linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: -o-linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);    background: linear-gradient(bottom, #FFFFFF 0%,#F2F2F2 50%,#DDDDDD 51%,#FFFFFF 100%);}

Edited November 25, 2013 by iKNG

Vlad · November 19, 2013

Здесь публикуются задачи для мини-конкурса Задание по CSS. Каждое задание должно содержать:

условия задачи, включая все необходимые скриншоты, требования по браузерам и др. Условия устанавливает сам автор.
решение задачи с необходимыми комментариями в сложных, по мнению автора, местах.

Приём работ завершается 28 ноября в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).

Bassline · November 20, 2013

Вращающаяся рамка

Задание:

Сделать для изображения рамку в форме круга, которая будет вращаться при наведении курсора мыши.

HTML:

<a href="#" class="circle">    <img src="picture.jpg" alt=""></a>

CSS:

С помощью псевдоэлемента :after, свойства animation и правила @keyframes.

Браузеры:

Последние версии Firefox, Chrome(Opera) и IE10+

Решение:

http://jsfiddle.net/96PfL/10/embedded/result/

http://jsfiddle.net/96PfL/10/

Vezha · November 20, 2013

Резиновые "ok" и "del" в рамочке на CSS3

Задача:
написать css для отображения вот таких кнопочек
использовать приведённый ниже html шаблон
независимость кода от размеров в css(.ok, .del{width:20px;height:20px;} или .ok, .del{width:300px;height:300px;})
HTML-код:
<a href="/" class="ok">	<i class="ok1"></i>	<i class="ok2"></i></a><a href="/" class="del">	<i class="del1"></i>	<i class="del2"></i></a>
Решение:
http://jsfiddle.net/Vezha/nP7kK/

Весёлая таблица

Дано:
Таблица:
HTML-код:
В коде есть подсказки:
 так обозначены строки дублируя которые модно увеличить число столбцов в таблице
  дублируя эту часть можно увеличить число строк
<table><tr><td rowspan="2">Vezha<br />#ddd</td><td rowspan="4"></td><td colspan="2">1   #ddd</td>		<td rowspan="2"></td><td colspan="2">2</td><td rowspan="4"></td><td colspan="2">3</td><td rowspan="2"></td><td colspan="2">9   #eee</td><td rowspan="4"></td></tr><tr><td>1a</td><td>1b</td>		<td>2a</td><td>2b</td><td>3a</td><td>3b</td><td>9a</td><td>9b</td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td></tr><tr><td>A   #999</td><td>A1</td><td>A1</td>		<td rowspan="3"></td><td>A2</td><td>A2</td><td>A3</td><td>A3</td><td rowspan="3"></td><td>A9</td><td>#aaa</td></tr>    		<tr><td colspan="4"></td>		<td colspan="5"></td><td colspan="3"></td></tr><tr><td>B</td><td rowspan="3"></td><td>B1</td><td>B1</td>		<td>B2</td><td>B2</td><td rowspan="3"></td><td>B3</td><td>B3</td><td>B9</td><td>B9</td><td rowspan="3"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td></tr><tr><td>C</td><td>C1</td><td>C1</td>		<td rowspan="3"></td><td>C2</td><td>C2</td><td>C3</td><td>C3</td><td rowspan="3"></td><td>C9</td><td>C9</td></tr>    		    <tr><td colspan="4"></td>		<td colspan="5"></td><td colspan="3"></td></tr><tr><td>Z   #ccc</td><td rowspan="2"></td><td>Z1</td><td>Z1</td>		<td>Z2</td><td>Z2</td><td rowspan="2"></td><td>Z3</td><td>Z3</td><td>Z9</td><td>#ddd</td><td rowspan="2"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td></tr></table>
Задача:

9 - это чётная колонка в данном примене
Детали задачи:
Стилизировать таблицу следующим образом:
#efe горизонтальная разделительная линия
#eef вертикальная разделительная линия
#999 не чётная строка не чётная колонка
#aaa не чётная строка чётная колонка
#bbb рамка (border)
#ccc чётная строка не чётная колонка
#ddd чётная строка чётная колонка и заглавие не чётной колонки
#eee заглавие чётной колонки

Решение:
http://jsfiddle.net/Vezha/nP7kK/

Edited November 25, 2013 by Vezha

Vlad · November 21, 2013

@terorama, рекомендую сократить число элементов в задаче с полем. Принцип можно понять и при размерах в четыре раза меньших.

Vezha · November 23, 2013

@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.
И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

terorama · November 23, 2013

@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.
И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

Я просто, изучая CSS, сталкиваюсь с разными нюансами верстки,

чтобы лучше разобраться - придумываю какой-нибудь пример, связанный с одним конкретным нюансом.

Здесь задачи, придуманные по такому принципу. Да, Ок, сгруппирую.

Не удается все запихнуть в один пост - пишет недопустимое число изображений

И как удалить предыдущие сообщения?

Edited November 23, 2013 by terorama

terorama · November 23, 2013

Галстук

Задание:
Дана следующая html - разметка
 <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>      <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>
На основании нее нужно создать такую фигуру:

Решение:

http://jsbin.com/UmedOlI/3/edit

Раскрашенное поле

Задание:
создать такое поле

Решение:

http://jsbin.com/edOzuquc/6/edit

Крестики-нолики

Задание:

Дана разметка:
<div class="container">  <div class="a">    <div class="b">    </div>  </div>  <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>  </div>
нужно создать такую фигуру:

Решение:

http://jsbin.com/OsAcUd/2/edit

Перевернутая таблица

Задание:

Дана таблица
 <table>   <tr><th>A</th><th>B</th><th>C</th></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>    </table>
Нужно оформить ее следующим образом

Решение:

http://jsbin.com/oJAWEGa/2/edit

Списки

Задание:

Даны вложенные списки

<ul>    <li> 1     <ol><li>1.1</li>        <li>1.2</li>        <li>1.3</li>        <li>1.4</li>      </ol>    </li>        <li>2    <ol><li>2.1</li>        <li>2.2</li>        <li>2.3</li>        <li>2.4</li>      </ol>    </li>        <li>3      <ol><li>3.1</li>        <li>3.2</li>        <li>3.3</li>        <li>3.4</li>      </ol>    </li>        <li>4    <ol><li>4.1</li>        <li>4.2</li>        <li>4.3</li>        <li>4.4</li>      </ol>    </li>         </ul>

Нужно оформить их следующим образом:

Решение:

http://jsbin.com/epAxiwe/4/edit

Снеговик

Задание:
Даны три вложенных блока
<div><div><div></div></div></div>
Нужно изобразить с их помощью снеговика

Решение:

http://jsbin.com/utaxONO/4/edit

Форма входа

Задание:
Дана форма
<form action="" method="post">        <fieldset>            <label for="uname"> username</label>      <input type="text" name="username" id="uname" placeholder="username" required />      <label for="passw"> password</label>      <input type="password" name="password" id="passw" required />            <button>login</button>      <span class="twitter">login via twitter</span>      <span class="fb">login via facebook</span>    </fieldset>  </form>
Нужно оформить ее таким образом

Социальные иконки: http://htmlbook.ru/files/social_icons.png

Решение:

http://jsbin.com/UVUzugu/1/edit

Выравнивание блоков

Задание:

С помощью разметки
<div class="a">        <div></div>    <div></div>    <div></div>    <div></div>    <div></div>        <div></div>       <div></div>    <div></div>    <div></div>    <div></div>    </div>
нужно изобразить такую фигуру

Решение

http://jsbin.com/aGuwoMen/1/edit

Цветок

Задание:

С помощью 6 вложенных блоков
<div><div><div>      <div><div><div>      </div></div></div>  </div></div></div>
изобразить цветок

Решение

http://jsbin.com/AkocOWU/1/edit

Диагональный текст

Задание:

Дана разметка

<div>      <span class="red">red fox chasing</span>     <span class="white">the white rabbit</span>      <span class="red">red mushrooms grow</span>     <span class="white">in the white snow</span>      <span class="red">red fox chasing</span>       <span class="white">the white rabbit</span>   <span class="red">red mushrooms grow</span>   <span class="white">in the white snow</span>   </div>

Нужно выстроить текст в блоках по диагонали

Решение

http://jsbin.com/IJiwoJoP/1/edit

terorama · November 23, 2013

Спираль

Задание:

Изобразить спираль

Решение

http://jsbin.com/OBEpABab/1/edit

3D- трансформации

Задание:

Дана разметка



<div class="a">

    <div class="red">

      red

    </div>

    

    <div class="orange">

      orange

    </div>

    

    <div class="yellow">

      yellow

    </div>

    

    <div class="green">

      green

    </div>

  </div>

Используя 3D - трансформации оформить ее в виде такого изображения

Решение

http://jsbin.com/UZodIBEt/1/edit

Креативный div

Задание:

Дан один элемент div



<div></div>

Нужно оформить его таким образом

символ коня ♘

Решение

http://jsbin.com/aRafOciH/1/edit

Аккордеон

Задание:

Создать аккордеон с переключающимися вкладками без использования JavaScript

Решение

http://jsbin.com/eyAxIha/1/edit

(Для переключения вкладок используются скрытые чекбоксы. Подробнее про чекбокс-хак

здесь

http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/ )

Вложенные блоки

Задание:

Даны 5 вложенных блоков с текстом



 <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

    <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span>

  

  </div></div></div></div></div>

Нужно оформить их таким образом

Решение

http://jsbin.com/agikesEc/1/edit

Повернутый заголовок

Задание:

На основании следующей разметки



 <header>

    <h1>Blog name</h1>

    <h2>blog description</h2>

    

    <h3>Tel: 7-777-77-77</h3>

    <h4><span>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit 

 

Amet</span></h4>

  </header>

нужно изобразить такой заголовок

Решение

http://jsbin.com/UyaBejU/1/edit

Edited November 23, 2013 by terorama

lexxcode · November 23, 2013

Зачистил тему от дублей товарища terorama

terorama · November 23, 2013

Выравнивание блоков в контейнере

Задание:
Контейнер размером 300px X 300px содержит 9 блоков произвольной высоты и ширины.
Высота и ширина внутренних блоков не превышает 100px.
Необходимо расположить блоки в 3 ряда и выровнять следующим образом.
1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го
2) По горизонтали - justify - то-есть левый и правый элементы упираются в края контейнера,
промежутки между элементами одинаковые
(Для решения можно использовать любую вспомогательную разметку)

Решение

http://jsbin.com/eBAjIZABI/1/edit

2 Вариант задачи.

Все условия аналогичны предыдущей задаче, за исключением горизонтального выравнивания блоков.

Блоки нужно выровнять по сетке:

1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го
2) По горизонтали - по средней линии соответственно 50px для 1-й колонки, 150px для 2-й и 250 для 3-й

(аналогично для решения можно использовать дополнительную разметку)

Решение

http://jsbin.com/eBAjIZABI/2/edit

Выравнивание блоков с помощью абсолютного позиционирования

Задание:

В квадратный контейнер произвольного размера помещены 9 блоков произвольной ширины и высоты.

Разметка (каждый блок содержит внутри один вспомогательный контейнер)
<!DOCTYPE html><html><head><meta charset=utf-8 /><title>Absolute positioning</title>    <style type="text/css">        .red {      background:red;      width:40px;      height:50px;    }    .orange {      width:50px;      height:30px;      background:orange;    }        .yellow {      width:70px;      height:50px;      background:yellow;    }        .lime {      width:70px;      height:30px;      background:lime;    }        .green {      width:50px;      height:70px;      background:green;    }        .cyan {      width:60px;      height:60px;      background:cyan;    }        .blue {      background:blue;      width:40px;      height:70px;    }        .magenta {      width:60px;      height:70px;      background:magenta;    }        .pink {      width:70px;      height:50px;      background:pink;    }  </style></head><body>  <div class="container">    <div class="wrapper red">    <div>    </div></div>      <div class="wrapper orange">    <div>    </div></div>         <div class="wrapper yellow">    <div>    </div></div>         <div class="wrapper lime">    <div>    </div></div>              <div class="wrapper green">    <div>    </div>  </div>    <div class="wrapper cyan">    <div>    </div>  </div>     <div class="wrapper blue">    <div>    </div>  </div> <div class="wrapper magenta">    <div>    </div>  </div> <div class="wrapper pink">    <div>    </div>  </div></div></body></html> 
Нужно, используя абсолютное позиционирование, разместить блоки по центру узлов сетки, делящей контейнер на 4 части по горизонтали и вертикали.

Решение

http://jsbin.com/iCikaPug/1/edit

Рисунок из плавающих блоков

Задание:
Дан контейнер с набором блоков со статическим позиционированием и float:left

Разметка
<!DOCTYPE html><html><head><meta charset=utf-8 /><title>floats</title>    <style type="text/css">    .container>div {        float:left!important;   position:static!important;}  </style></head><body>  <div class="container">        <div class="a"></div>    <div class="b"></div>    <div class="c"></div>    <div class="d"></div>    <div class="e"></div>    <div class="f"></div>    <div class="g"></div>    <div class="h"></div>    <div class="i"></div>    <div class="j"></div>    <div class="k"></div>    <div class="l"></div>    <div class="m"></div>    <div class="n"></div>    <div class="o"></div>    <div class="p"></div>    </div></body></html>
Нужно, манипулируя шириной, высотой, отступами и свойством clear блоков, получить такое изображение

Решение

http://jsbin.com/eLAHUWe/1/edit

Трубопровод

Задание

Используя спрайт с изображением элементов трубопровода
http://comps.canstockphoto.com/can-stock-photo_csp2136532.jpg ,
нужно получить такое изображение:

Решение

http://jsbin.com/ABAXUye/1/edit

Стрелка

Задание:

Изобразить стрелку из блоков

Решение

http://jsbin.com/OVOREwo/1/edit

Заголовки

Задание

Дана следующая разметка для заголовков от h1 до h6:

 <h1>Header 1        <span>Lorem Ipsum</span>    <span>Lorem Ipsum Dolor Sit Amet </span>     <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet </span>    <span>Lorem Ipsum</span>     </h1>    <h2>Header 2</h2>    <h3>Header 3     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>  </h3>      <h4>Header 4      <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>      </h4>      <h5>Header 5       <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>    </h5>    <h6><span>Header 6</span>    <span>Lorem Ipsum Dolor Sit Amet</span>   </h6>

Нужно оформить заголовки таким образом:

Решение

http://jsbin.com/ugOVanIL/2/edit

Соударяющиеся шарики

Задание:

Дано 4 шарика, выстроенных по горизонтали на одинаковом расстоянии друг от друга.
Справа от шариков расположена стена.

Реализовать анимацию:

1) 1 шарик двигается вправо, ударяет 2-й и останавливается.
2) После соударения 2-й шарик начинает двигаться вправо до соударения с 3-м, после чего останавливается
3) 3-й и 4-й аналогично.

4) 4-й шарик движется вправо до соударения со стеной, после чего возвращается, ударяя 3-й шарик справа, и останавливается.

5) 3-й шарик после соударения движется влево до соударения со 2-м и останавливается.
6) 2-й и первый аналогично.

(после того, как 1-й шарик возвращается влево, все шарики стоят в исходной позиции и анимация заканчивается)

Решение

http://jsbin.com/AsuhODu/3/edit

Edited November 25, 2013 by terorama

gvardi · November 24, 2013

Текст подсказка.

Задание:

Сделать текст подсказку как показано на изображении ниже. Вывод текста из атрибута поможет сделать функция CSS3 attr()

Требования:

- Сделать плавную анимацию появления, за исключением Opera, Safari, IE<=9;
- Элементы пузырей сделать css3 свойствами.
- Выдать минимальное количество кода.

Рис. текст подсказка

Изображение облака -

HTML разметка - <a href="#" class="cloud-alt" alt=' ТУТ ТЕКСТ ПОДСКАЗКА '><i></i>Я Вконтакте</a>

Решение -http://jsfiddle.net/4kTp9/6/

Edited November 25, 2013 by gvardi

Vlad · November 24, 2013

@Vezha, задачу про IE7 принимать не буду. В правилах, конечно, про браузеры ничего не указано, но популяризация подобных динозавров не входит в мои планы.

Vezha · November 25, 2013

@Vezha, задачу про IE7 принимать не буду.

Хорошо

mrnobody · November 25, 2013

Текст подсказка.

У меня в хроме не работает (Версия 31.0.1650.57 m)

Kyokata · November 25, 2013

http://jsfiddle.net/4kTp9/

Обычно сервак работает. Походу у нас опять веерные отключения электричества

Шарик с тенью и рефлексами из обычного divа.

HTML:

<!DOCTYPE html><html lang="ru"><head><title>Просто шарик</title></head><body><div></div></body></html>

CSS:

body div{top:100px;width:150px;margin:0 auto;height:150px;background:-o-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-moz-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-webkit-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:-ms-radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);background:radial-gradient(top left,#ffffff 0,#ff0000 20%,#cc0000 40%,#330000 80%,#ffffff);position:relative;overflow:visible;padding:60px;border-radius: 50%;border:1px solid black;}body div:after{content:'';position:absolute;background:-moz-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-o-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-webkit-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:-ms-radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));background:radial-gradient(left,#660000 20px,rgba(0,0,0,1) 50%,rgba(0,0,0,0));height:80px;bottom:0px;left:90px;width:300px;border-radius: 50%;z-index:-1;-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}

P.S. Спасибо за перенос поста, спросонья тему попутал

Edited November 25, 2013 by Kyokata

lexxcode · November 25, 2013

Kyokata перезалей пример на http://jsfiddle.net. А то шарить со своего компа конечно прикольно, я понимаю, но на данный момент недоступно

gvardi · November 25, 2013

Текст подсказка.
У меня в хроме не работает (Версия 31.0.1650.57 m)

Поправил

mrnobody · November 26, 2013

Kyokata, зачетный шарик )

PS: В jsfiddle не нужно вставлять элемент <body>.

Edited November 26, 2013 by mrnobody

terorama · November 26, 2013

Адаптивный блок

Задание:

Изобразить блок, ширина и высота которого составляет 50% от ширины окна браузера

Решение

http://jsbin.com/oYaMEqOd/1/edit

Трехмерная таблица

Задание:

Дана таблица
 <table>    <tr><td>A</td><td>B</td><td>C</td></tr>    <tr><td>D</td><td>E</td><td>F</td></tr>    <tr><td>G</td><td>H</td><td>I</td></tr>  </table>
Нужно оформить ее таким образом

Решение

http://jsbin.com/EKiBERaX/1/edit

Красная кнопка

Задание:

Нужно, используя CSS 3, нарисовать конструкцию, включающую кнопку и две створки.
В исходном состоянии створки повернуты на 45 градусов по часовой стрелке и закрывают кнопку.

По нажатию на конструкцию реализуется анимация, состоящая из 2-х фаз:

1) Створки поворачиваются на 45 градусов против часовой стрелки (т.е. встают вертикально)
2) Створки раздвигаются соответственно влево и вправо, открывая кнопку.

При повторном нажатии створки возвращаются в исходное положение

(символ коня ♘ )

Решение

http://jsbin.com/OPatoSoW/1/edit

Адаптивный слайдер

Задание:
Реализовать слайдер, переключающийся при изменении ширины окна браузера.

Например:

1. Слайдер включает 6 изображений.

2. При ширине окна браузера более 900px слайдер показывает 1-е изображение

3. Если ширина окна браузера меньше 900px слайдер переключается на следующее изображение при изменении ширины на 50px.
(то-есть 900-850px - 2 изображение 850-800 - 3-е, 800-750 - 4-е, 750-700 - 5-е 700-650 - 6-е)

4. При ширине окна меньше 650px - слайдер показывает последнее изображение

Решение

http://jsbin.com/uqONuMu/1/edit

Высота колонок

Вариация классической задачи про колонки одинаковой высоты.

—————————————-
Базовая постановка задачи:
Даны три колонки разного цвета. Высота колонок определяется контентом внутри.
Необходимо сделать все колонки по высоте равными самой высокой колонке.

Подробнее здесь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
—————————————-

Задание
Реализовать следующую разметку:
1. Верхняя часть состоит из 3-х колонок одинаковой ширины (равной 1/3 ширины экрана)

2. В верхней части колонок расположены два блока (Lorem Ipsum) произвольной высоты, которые "толкают" содержимое колонок вниз.

3. Первые 2 колонки содержат контент произвольной высоты.
Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

4. Под первыми 2-мя колонками расположен футер (зеленый). Высота футера зависит от контента в нем.

5. Правая колонка (голубая) должна быть равна по высоте сумме высот 1-й колонки и футера.

6. Нижняя часть состоит из 2-х колонок одинаковой ширины (равной половине ширины экрана)
Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

Решение

http://jsbin.com/EpOlIGo/1/edit

Разноцветная таблица

Задание:

Нарисовать таблицу

Решение

http://jsbin.com/ayizeBE/1/edit

Слайдер

Задание:

Реализовать без использования JavaScript слайдер с последовательным переключением изображений.

Слайдер может включать неограниченное количество слайдов.
Для навигации используется два управляющих элемента в виде стрелок по бокам.

По нажатию на стрелку вправо слайдер переключается на следующее изображение
По нажатию на стрелку влево слайдер возвращается на первое изображение.

Решение

http://jsbin.com/IGEcIvob/1/edit

Выпадающее меню

Задание:

Изобразить выпадающее меню.

Разметка
 <ul class="root">    <li><a href="#">Home</a></li>    <li>      <input type="checkbox" name="z" />      <a href="#">Products</a>            <ul>        <li>          <input type="checkbox" name="z" />                    <a href="#">T-Shirts</a>                     <ul>             <li><a href="#">Type 1</a></li>             <li><a href="#">Type 2</a></li>             <li><a href="#">Type 3</a></li>             <li><a href="#">Type 4</a></li>           </ul>        </li>        <li><a href="#">Shirts</a></li>        <li><a href="#">Accessories</a></li>               </ul>     </li>    <li><a href="#">Stores</a></li>    <li><a href="#">Discounts</a></li>    <li><a href="#">Contacts us</a></li>  </ul> 
Меню работает без использования JavaScript.

Подменю открываются по щелчку мышью по стрелке рядом с соответствующим пунктом.
При повторном щелчке соответствующее подменю закрывается.

Подменю открываются с анимацией:
Подменю 2-го уровня разворачивается сверху, (то-есть начальная высота блока 0)
Подменю 3-го уровня разворачивается слева (начальная ширина блока 0)

Решение

http://jsbin.com/aQUPULa/1/edit

Edited November 27, 2013 by terorama

swandev · November 26, 2013

Горизонтальное меню

Задача:
Сверстать горизонтальное меню.

Исходная разметка:
<nav>    <ul>      <li>      <a href="#">        <span>Основное</span>      </a>    </li>    <li>      <a href="#">        <span>HTML</span>      </a>    </li>    <li>      <a href="#">        <span>CSS</span>      </a>    </li>    <li>      <a href="#">        <span>Сайт</span>      </a>    </li>    </ul>  </nav>
Необходимые изображения:

и (можно сделать на CSS)

Скриншоты:

Результат:

http://jsfiddle.net/Alexey_swn/3RKcw/1/
FS http://jsfiddle.net/Alexey_swn/3RKcw/1/embedded/result/

Edited November 27, 2013 by ALEEX SWN

Vlad · November 27, 2013

@, почему три картинки, при каких условиях вид меню меняется?

Кто делает задание с анимацией, рекомендую GIF добавить, это будет нагляднее всего.

swandev · November 27, 2013

@, почему три картинки, при каких условиях вид меню меняется?

Кто делает задание с анимацией, рекомендую GIF добавить, это будет нагляднее всего.

Можно без картинок. Сделать все на CSS.

Вид меню не изменится.

Kyokata · November 27, 2013

Kyokata, зачетный шарик )
PS: В jsfiddle не нужно вставлять элемент <body>.

Спасибо, буду знать

Действительно, правила применяются и без него, хтмл становится ещё меньше http://jsfiddle.net/4kTp9/9/

Sign In

Работы на конкурс «Задание по CSS»

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Important Information