CSS эффекты

@**Alex LM** · 14.10.2012, 19:14

Предлагаю в данной теме собирать интересные CSS эффекты.

Очень понравился...
Демонстрация эффекта

Код:

Оффтоп:

Реализация



<a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> <br /> <a href="#" class="yon"></a> <a href="#" class="goo"></a> <a href="#" class="rok"></a> <a href="#" class="ryk"></a> <br /> <a href="#" class="x7"></a> <a href="#" class="x8"></a> <a href="#" class="x9"></a>

CSS



body {

    padding: 100px 20px;

}



a {

    background-image: url(data:image/gif;base64,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);

    background-position: 50% 50%;

    background-repeat: no-repeat;

    background-origin: border-box;

    

    display: inline-block; width: 100px; height: 100px;

    border-width: 50px;

    border-color: rgba(0,0,0,0);

    

    border-radius: 100%;

    -moz-border-radius: 100%;

    -webkit-border-radius: 100%;

    

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    

    -webkit-transition: 0.5s ease;

    -moz-transition: 0.5s ease;

    -ms-transition: 0.5s ease;

    -o-transition: 0.5s ease;

    transition: 0.5s ease;

}



a:hover {

    border-width: 0;

    border-color: rgba(0, 0, 0, 0.5);

}



.one{border-style: solid;}

.two{border-style: dashed;}

.three{border-style: dotted;}



.yon {border: 50px solid rgba(0, 0, 0, 0.7);}

.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}

.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}

.ryk {border: 50px double rgba(0, 0, 0, 0.7);}

.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}

.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}

.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}

.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}



.x7, .x8, .x9 {

    border-radius: 0;

    -moz-border-radius: 0;

    -webkit-border-radius: 0;

}

.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}

.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}

.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}

.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}

.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}

.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}

Источник http://habrahabr.ru/post/154139/

@**cthulchu** · 16.10.2012, 17:11

заюзал на быструю руку, как раз, собирался переделать главную страницу центра управления сетями:

Оффтоп:

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

@**JoomL** · 16.10.2012, 19:09

Тоже добавлю от себя, многие его знают наверняка

@**JoomL** · 01.11.2012, 21:11

Вот еще подборка

@**newinseo** · 03.11.2012, 19:53

Недавно наткнулся на разные фигуры с CSS http://css-tricks.com/examples/ShapesOfCSS/

@MacPooh · 19.12.2012, 18:10

Ну если упоминать упоминать всякий фронт-энд "стайлинг", то стоит обернуть свой взгляд на один очень гордый и мощный на просторах РУнета блог efimov.ws
Сам на нём "учился" азам фронта=)

@**gidroballon** · 19.12.2012, 19:31

весьма приятная новогодняя гирлянда в хидере.

@ **Unick** · 26.09.2014, 10:07

animation css (transition) http://shpargalkablog.ru/2011/07/tra...aciya-css.html

@ **Unick** · 16.10.2014, 10:52

еще немного анимации на css (keyframes)
http://www.dejurka.ru/css/masterclass-css-animations/

@**AirPack** · 16.10.2014, 22:10

Возможно еще кому-то пригодятся css паттерны.
http://lea.verou.me/css3patterns/#

@**jazbass** · 16.10.2014, 22:47

Эффекты для меню:
http://tympanus.net/Development/CreativeLinkEffects/

Раскрывающиеся блоки с скрытым содержанием (но по моим наблюдениям не работают на гаджетах Apple):
http://dbmast.ru/raskryvayushhiesya-...pomoshhyu-css3

А вот этот работает на iДевайсах:
http://www.pvsm.ru/html/25760

@contorra · 14.11.2014, 19:19

Рабочее название - TTT, или Тасующаяся Трансформация Текста. Разработан по спецзаказу digital-агенства Contorra.

Этот плагин позволяет сменить один текст на другой посредством событий "клика" или "наведения" на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст. Демо здесь.

Инструкция по установке:
подключить jQuery
скачать файл плагина (2 кб) или скопировать в примере выше и подключить после jQuery (следите, чтобы русские символы не перекодировались браузером при скачивании)
добавить в html объект, содержащий текст, дата атрибут data-ttt-new с текстом к которому он будет трансформирован. Например:

Код:

<div data-ttt-new="Будущий текст">Базовый текст</div>

вызвать плагин TTT на обрабатываемый объект:

Код:

$(document).ready(function() { $('div').ttt(); });

И все, по стандарту при наведении на этот объект, его текст сменится на новый, а при потере наведения - вернется на исходный, со скоростью 60 fps.

Также существует ряд настроек:

задать объект для вызова события: 'btn':'селектор'
задать тип события по клику: 'event':'click'
скорость смены символов: 'fps':любое число кадров в секунду

Например:

Код:

$('div').ttt({
    'btn':'div',
    'event':'click',
    'fps':15
});

Пользовательская функция callback в данной версии не реализована.

@**cthulchu** · 14.11.2014, 21:02

@contorra, здесь о css, джаваскрипт не айс.

@contorra · 14.11.2014, 22:29

извините, спасибо. не нашел более подходящей ветки просто

16.10.2012, 17:11	#2
@cthulchu Добрый Копчик! Сообщений: 3,708 FR (активность): 120,615 Отзывы: 996 Доп. информация Регистрация: 12.06.2011 Специализация: SEO услуги Грамоты: 4 Адрес: Vancouver, BC	заюзал на быструю руку, как раз, собирался переделать главную страницу центра управления сетями: Оффтоп: милые автобусики, черт. люблю иногда побаловаться. и реализация простая. SEO/Analytics чат

16.10.2012, 19:09	#3
@JoomL Почетный пользователь Сообщений: 181 FR (активность): 4,743 Отзывы: 42 Доп. информация Регистрация: 12.01.2010 Специализация: Разработка сайтов Адрес: Рио-де-Коломна	Тоже добавлю от себя, многие его знают наверняка mrmixsun: сообщение полезно Потерявшихся, в джунглях, русских туристов нашли по матерящимся попугаям.

01.11.2012, 21:11	#4
@JoomL Почетный пользователь Сообщений: 181 FR (активность): 4,743 Отзывы: 42 Доп. информация Регистрация: 12.01.2010 Специализация: Разработка сайтов Адрес: Рио-де-Коломна	Вот еще подборка Потерявшихся, в джунглях, русских туристов нашли по матерящимся попугаям.

19.12.2012, 19:31	#7
@gidroballon примус починяю Сообщений: 605 FR (активность): 21,095 Отзывы: 168 Доп. информация Регистрация: 17.11.2011	весьма приятная новогодняя гирлянда в хидере. Bali Baguette: Эксклюзивно. Качественно. Доступно.

26.09.2014, 10:07	#8
@ Unick не Администратop Сообщений: 711 FR (активность): 37,335 Отзывы: 483 Доп. информация Регистрация: 12.07.2011 Специализация: Программирование Грамоты: 2 Адрес: Санкт-Петербург	animation css (transition) http://shpargalkablog.ru/2011/07/tra...aciya-css.html andreisoroka.com

03.11.2012, 19:53	#5
@newinseo Основа форума Сообщений: 295 FR (активность): 8,496 Отзывы: 59 Доп. информация Регистрация: 15.11.2009	Недавно наткнулся на разные фигуры с CSS http://css-tricks.com/examples/ShapesOfCSS/

19.12.2012, 18:10	#6
@MacPooh Сообщений: 11 FR (активность): 173 Отзывы: Доп. информация Регистрация: 05.02.2012	Ну если упоминать упоминать всякий фронт-энд "стайлинг", то стоит обернуть свой взгляд на один очень гордый и мощный на просторах РУнета блог efimov.ws Сам на нём "учился" азам фронта=)

16.10.2014, 10:52	#9
@ Unick не Администратop Сообщений: 711 FR (активность): 37,335 Отзывы: 483 Доп. информация Регистрация: 12.07.2011 Специализация: Программирование Грамоты: 2 Адрес: Санкт-Петербург	еще немного анимации на css (keyframes) http://www.dejurka.ru/css/masterclass-css-animations/ andreisoroka.com

16.10.2014, 22:10	#10
@AirPack Почетный пользователь Сообщений: 168 FR (активность): 3,968 Отзывы: 74 Доп. информация Регистрация: 24.07.2013 Специализация: Новичок Адрес: Россия,Беларусь	Возможно еще кому-то пригодятся css паттерны. http://lea.verou.me/css3patterns/#

16.10.2014, 22:47	#11
@jazbass Юноша с выдержкой Сообщений: 526 FR (активность): 21,045 Отзывы: 330 Доп. информация Регистрация: 11.02.2009 Специализация: Увлекающийся SEO Грамоты: 1 Адрес: В метаниях между Санкт-Петербургом, Москвой и Сочи	Эффекты для меню: http://tympanus.net/Development/CreativeLinkEffects/ Раскрывающиеся блоки с скрытым содержанием (но по моим наблюдениям не работают на гаджетах Apple): http://dbmast.ru/raskryvayushhiesya-...pomoshhyu-css3 А вот этот работает на iДевайсах: http://www.pvsm.ru/html/25760

14.11.2014, 19:19	#12
@contorra Сообщений: 5 FR (активность): 73 Отзывы: Доп. информация Регистрация: 12.11.2014 Специализация: Разработка сайтов Адрес: Сочи	Рабочее название - TTT, или Тасующаяся Трансформация Текста. Разработан по спецзаказу digital-агенства Contorra. Этот плагин позволяет сменить один текст на другой посредством событий "клика" или "наведения" на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст. Демо здесь. Инструкция по установке: подключить jQuery скачать файл плагина (2 кб) или скопировать в примере выше и подключить после jQuery (следите, чтобы русские символы не перекодировались браузером при скачивании) добавить в html объект, содержащий текст, дата атрибут data-ttt-new с текстом к которому он будет трансформирован. Например: Код: <div data-ttt-new="Будущий текст">Базовый текст</div> вызвать плагин TTT на обрабатываемый объект: Код: $(document).ready(function() { $('div').ttt(); }); И все, по стандарту при наведении на этот объект, его текст сменится на новый, а при потере наведения - вернется на исходный, со скоростью 60 fps. Также существует ряд настроек: задать объект для вызова события: 'btn':'селектор' задать тип события по клику: 'event':'click' скорость смены символов: 'fps':любое число кадров в секунду Например: Код: $('div').ttt({ 'btn':'div', 'event':'click', 'fps':15 }); Пользовательская функция callback в данной версии не реализована.

14.11.2014, 21:02	#13
@cthulchu Добрый Копчик! Сообщений: 3,708 FR (активность): 120,615 Отзывы: 996 Доп. информация Регистрация: 12.06.2011 Специализация: SEO услуги Грамоты: 4 Адрес: Vancouver, BC	@contorra, здесь о css, джаваскрипт не айс. contorra: сообщение полезно SEO/Analytics чат

14.11.2014, 22:29	#14
@contorra Сообщений: 5 FR (активность): 73 Отзывы: Доп. информация Регистрация: 12.11.2014 Специализация: Разработка сайтов Адрес: Сочи	извините, спасибо. не нашел более подходящей ветки просто

Сообщение форума

Отменить изменения

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра	Оценка этой теме
Линейный вид Комбинированный вид Древовидный вид	Оценка этой теме: