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

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

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

Доп. информация
По умолчанию Автор темы 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,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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/
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,659
FR (активность): 106,746

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

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

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

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

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


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

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

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


Потерявшихся, в джунглях, русских туристов нашли по матерящимся попугаям.
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
 
Сообщений: 698
FR (активность): 31,962

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

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
 
Сообщений: 698
FR (активность): 31,962

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

еще немного анимации на 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,513

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

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

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

Эффекты для меню:
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,659
FR (активность): 106,746

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

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

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

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

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

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

Сообщение:
Опции


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

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

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