HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров

« Предыдущая запись
 
  Следующая запись »
 

Прежде всего поздравляю всех читательниц с прошедшим 8 марта. Счастья вам, успехов и, самое главное, побольше любви, особенно взаимной =).

Сегодня я хочу поделиться с Вами собранной коллекцией всяких плюшек на HTML5 и CSS3. Я их раскидал по группам, так что каждый найдёт себе что-нибудь по вкусу. Итак…

Прежде всего скину несколько сайтов-помощников, которые помогают построить градиенты, закруглить углы, сделать тень и так далее.

 

Помощники для построение свойств CSS3

  1. CSS3 MikePlate. На этом сайте можно опробовать всевозможные варианты работы с CSS3, включая box-shadow, transform, column-count, gradient и прочее.
  2. OGA2 Gradient. А на этом сайте можно развлекаться исключительно с градиентами – строим то, что надо и получаем код.
  3. ColorZilla Gradient Editor. аналог предыдущего сайта, только выполнено в стили фотошопа, есть в наличии пресеты, а код при всём при том заточен и под ишак.
    colorzilla HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  4. Westciv Shadows. На этом сайте предоставляется возможность работать с text-shadow. Создаём текст, оформляем его, задаём сколько нужно теней и вуаля.
  5. Border-Radius.com. Здесь, как уже ясно, работаем с border-radius.

 

Штуковина!

Эту страницу пущу отдельно. Josh Duck – Periodic Table. Она представляет собой "Периодическую" таблицу элементов HTML5, сделанную, как это ни странно, на HTML5. Помимо того, что стильно, так ещё и полезно – можно кратко прочитать для чего какой элемент нужен.

ptable HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров

 

Интересные примеры

  1. Tilt Shift. Одна из первых страничек, попавшихся мне на глаза. Любопытный пример изменения шрифта.
    tilt HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  2. CSS3 Timer. Таймер на CSS3 отсчитывает часы, минуты и секунды.
  3. CSS Boxs-Shadow Experiments. Сам сайт zurb.com кишит интереснейшими примерами на CSS3. Это ссылка на эксперименты с box-shadow. Вообще сайт на заметку.
    boxshad HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  4. CSS3 Social Icons. Иконки социальных сетей на CSS3.
    socialicons HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  5. Boxtuffs. Немногочисленные. но очень любопытные примеры. Что-то я в будущем даже упру к себе.

 

Скачать

  1. CSS3 Buttons. CSS3 кнопочки
    bonbon HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  2. CSS3 Menu. CSS3 менюшечки
    css3menus HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров

 

И напоследок несколько ссылок на любопытные сайты/страницы, идеи из которых являются хорошей пищей для ума.

Поглазеть

  1. Nevermind The Bullets. Комикс на CSS3. Пожалуй лучший сайт на CSS3. Пользы от него мало, но нереально стайловый.
    comix HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  2. Webkit Clock. Часовые пояса на карте мира. Прикольная штука.
    webkitclock HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  3. Ball Pool. Бассейн с шариками. Не сайт, а залипалово – сидишь и валяешь дурака.
    ballpool HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров
  4. CSS3 Design Contest Results. Ещё двадцак конкурсных интереснейших примеров от Smashing Magazine.

 

 

На сегодня всё! Всем удачи, скоро увидимся!

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 7, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 2 на запись

"HTML5 и CSS3 уже сегодня! Часть 2. Подборка интересных и практичных примеров"

  1. Спасибо.
    Старался не зря.

  2. Александр Шуйский
    11/05/2012 at 19:56 Постоянная ссылка Цитировать

    Рад слышать! Спасибо =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии