Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Программирование

Важная информация
Программирование - PHP, MySQL, JavaScript, CSS, HTML верстка и т.д.

Ответ
 
Опции темы Рейтинг: Рейтинг темы: голосов - 2, средняя оценка - 1.00. Опции просмотра
Старый 14.10.2012, 19:14   #1
 
Аватар для Alex LM
 
Сообщений: 973
FR (активность): 287,132

Доп. информация
По умолчанию Автор темы CSS эффекты

Предлагаю в данной теме собирать интересные 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,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJ E3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8f ABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZW SHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AA AAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH 5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGU NqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy 7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNA q2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtF iF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD 6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P +hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUX GwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihl O92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmI KX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX 4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FW QAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinItts gSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxB RydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFK FVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFe CWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSA JMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEK CDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFg AWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB77 6aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8Sv OfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1 FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChS IQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==);
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/
mrmixsun: сообщение полезно


Alex Life Mix – путешествия
Часто задаваемые вопросы форума по SEO и близкой тематике - SEO FAQ
Alex LM вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
cthulchu (14.10.2012), OS_ZP_UA (14.10.2012), Phoenix (14.10.2012), webmas (16.10.2012)
Старый 16.10.2012, 17:11   #2
 
Аватар для cthulchu
 
Сообщений: 3,708
FR (активность): 120,615

Доп. информация
По умолчанию

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

милые автобусики, черт. люблю иногда побаловаться. и реализация простая.
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 16.10.2012, 19:09   #3
 
Аватар для JoomL
 
Сообщений: 181
FR (активность): 4,743

Доп. информация
По умолчанию

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


Потерявшихся, в джунглях, русских туристов нашли по матерящимся попугаям.
JoomL вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
cthulchu (16.10.2012)
Старый 01.11.2012, 21:11   #4
 
Аватар для JoomL
 
Сообщений: 181
FR (активность): 4,743

Доп. информация
По умолчанию

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


Потерявшихся, в джунглях, русских туристов нашли по матерящимся попугаям.
JoomL вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 03.11.2012, 19:53   #5
 
Аватар для newinseo
 
Сообщений: 295
FR (активность): 8,496

Доп. информация
По умолчанию

Недавно наткнулся на разные фигуры с CSS http://css-tricks.com/examples/ShapesOfCSS/
newinseo вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
СТЕПАН (03.11.2012)
Старый 19.12.2012, 18:10   #6
 
Аватар для MacPooh
 
Сообщений: 11
FR (активность): 173

Доп. информация
По умолчанию

Ну если упоминать упоминать всякий фронт-энд "стайлинг", то стоит обернуть свой взгляд на один очень гордый и мощный на просторах РУнета блог efimov.ws
Сам на нём "учился" азам фронта=)
MacPooh вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 19.12.2012, 19:31   #7
 
Аватар для gidroballon
 
Сообщений: 605
FR (активность): 21,095

Доп. информация
По умолчанию

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


Bali Baguette: Эксклюзивно. Качественно. Доступно.
gidroballon вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 26.09.2014, 10:07   #8
 
Аватар для Unick
 
Сообщений: 711
FR (активность): 37,335

Доп. информация
По умолчанию

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


andreisoroka.com
Unick вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
renegat33 (27.09.2014), webmas (26.09.2014)
Старый 16.10.2014, 10:52   #9
 
Аватар для Unick
 
Сообщений: 711
FR (активность): 37,335

Доп. информация
По умолчанию

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


andreisoroka.com
Unick вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
jazbass (16.10.2014), Stelz (16.10.2014), webmas (16.10.2014)
Старый 16.10.2014, 22:10   #10
 
Аватар для AirPack
 
Сообщений: 168
FR (активность): 3,968

Доп. информация
По умолчанию

Возможно еще кому-то пригодятся css паттерны.
http://lea.verou.me/css3patterns/#
AirPack вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
jazbass (16.10.2014), webmas (17.10.2014)
Старый 16.10.2014, 22:47   #11
 
Аватар для jazbass
 
Сообщений: 526
FR (активность): 21,045

Доп. информация
По умолчанию

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

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

А вот этот работает на iДевайсах:
http://www.pvsm.ru/html/25760
jazbass вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
webmas (17.10.2014)
Старый 14.11.2014, 19:19   #12
 
Аватар для contorra
 
Сообщений: 5
FR (активность): 73

Доп. информация
По умолчанию

Рабочее название - 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 в данной версии не реализована.
contorra вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 14.11.2014, 21:02   #13
 
Аватар для cthulchu
 
Сообщений: 3,708
FR (активность): 120,615

Доп. информация
По умолчанию

@contorra, здесь о css, джаваскрипт не айс.
contorra: сообщение полезно
cthulchu вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 14.11.2014, 22:29   #14
 
Аватар для contorra
 
Сообщений: 5
FR (активность): 73

Доп. информация
По умолчанию

извините, спасибо. не нашел более подходящей ветки просто
contorra вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Метки
css, css эффекты

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 2741 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Текущее время: 18:08. Часовой пояс GMT +3.