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

mrnobody · November 19, 2013

Радиоволны

Reveal hidden contents
Задача:
С помощью 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

Время

Reveal hidden contents
Задача:
Основная — используя 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

Часы

Reveal hidden contents
Задача:
Сделать простые часы с идущими стрелками используя 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

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

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

Reveal hidden contents
Требуется создать кнопку (рис. 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. При том запрещено использовать изображения.

Решение:

Reveal hidden contents

.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

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

Задание:

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

Reveal hidden contents

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

Reveal hidden contents
Задача:
написать 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/

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

Reveal hidden contents
Дано:
Таблица:
HTML-код:
Reveal hidden contents
В коде есть подсказки:
 так обозначены строки дублируя которые модно увеличить число столбцов в таблице
  дублируя эту часть можно увеличить число строк
<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 - это чётная колонка в данном примене
Детали задачи:

Reveal hidden contents
Стилизировать таблицу следующим образом:
#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

On 11/23/2013 at 12:03 PM, Vezha said:
@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.
И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

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

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

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

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

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

Edited November 23, 2013 by terorama

terorama · November 23, 2013

Галстук

Reveal hidden contents
Задание:
Дана следующая 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

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

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

Решение:

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

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

Reveal hidden contents

<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>

нужно создать такую фигуру:

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

Reveal hidden contents
Задание:

Дана таблица
 <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

Списки

Reveal hidden contents

<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>

Снеговик

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

Решение:

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

Форма входа

Reveal hidden contents

<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>

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

Reveal hidden contents
Задание:

С помощью разметки
<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

Цветок

Reveal hidden contents
Задание:

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

Решение

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

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

Reveal hidden contents

<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>

terorama · November 23, 2013

Спираль

Reveal hidden contents

Задание:

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

Решение

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

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

Reveal hidden contents

Задание:

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



<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

Reveal hidden contents

Задание:

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



<div></div>

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

символ коня ♘

Решение

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

Аккордеон

Reveal hidden contents

Задание:

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

Решение

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

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

здесь

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

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

Reveal hidden contents

Задание:

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

Reveal hidden contents



 <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

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

Reveal hidden contents

Задание:

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



 <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

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

Reveal hidden contents
Задание:
Контейнер размером 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

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

Reveal hidden contents

<!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>

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

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

Разметка
Reveal hidden contents
<!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

Трубопровод

Reveal hidden contents

Задание

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

Решение

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

Стрелка

Reveal hidden contents

Задание:

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

Решение

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

Заголовки

Reveal hidden contents

 <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>

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

Reveal hidden contents

Задание:

Дано 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

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

Quote

Задание:

Сделать текст подсказку как показано на изображении ниже. Вывод текста из атрибута поможет сделать функция 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

On 11/24/2013 at 11:58 PM, 'Vlad said:
@Vezha, задачу про IE7 принимать не буду.

Хорошо

mrnobody · November 25, 2013

On 11/24/2013 at 7:01 PM, gvardi said:
Текст подсказка.

У меня в хроме не работает (Версия 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:

Reveal hidden contents

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

On 11/25/2013 at 8:41 PM, mrnobody said:

On 11/24/2013 at 7:01 PM, gvardi said:
Текст подсказка.
У меня в хроме не работает (Версия 31.0.1650.57 m)

Поправил

mrnobody · November 26, 2013

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

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

Edited November 26, 2013 by mrnobody

terorama · November 26, 2013

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

Reveal hidden contents

Задание:

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

Решение

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

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

Reveal hidden contents

Задание:

Дана таблица
 <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

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

Reveal hidden contents

Задание:

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

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

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

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

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

Решение

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

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

Reveal hidden contents

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

Например:

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 - слайдер показывает последнее изображение

Reveal hidden contents

Решение

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

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

Reveal hidden contents

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

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

Подробнее здесь: 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

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

Reveal hidden contents

Задание:

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

Решение

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

Слайдер

Reveal hidden contents

Задание:

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

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

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

Решение

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

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

Reveal hidden contents

Задание:

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

Разметка
Reveal hidden contents
 <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

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

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

Исходная разметка:
<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)

Скриншоты:

Reveal hidden contents

Результат:

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

On 11/27/2013 at 12:25 AM, Vlad said:
@, почему три картинки, при каких условиях вид меню меняется?

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

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

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

Kyokata · November 27, 2013

On 11/26/2013 at 6:31 AM, mrnobody said:
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