Регистрация    Вход    Форум    Поиск    FAQ

  •  Новости
  • Beeline + Twitter = чирикай через SMS!

    Beeline + Twitter = чирикай через SMS! На первой картинке обозначены команды, при помощи которых через SMS Вы сможете кого-либо зафолловить или же отписаться, ретвитнуть чей-либо пост или же написать личное сообщение.

    Open Graph Protocol. От создателей Facebook

    Open Graph Protocol. От создателей Facebook Разбираясь с Facebook API, случайно наткнулся на другую интересную разработку от этих людей.

    Глобальное ускорение Wordpress

    Глобальное ускорение Wordpress Не считая очевидных решений типа отключения некоторых плагинов и перехода на тему попроще, я вижу 2 пути для оптимизации: кэширование и сжатие траффика.




  •  Часы


  •  Поиск

Optimaze » Программирование » CSS3 – не тенями едиными




CSS3 – не тенями едиными

  1. Закругленные углы и тени:
  2. Блок под углом:
  3. Полупрозрачный блок:
  4. Элементы, меняющие размер при наведении:
  5. Организация текста в колонки (только для Firefox):


CSS эволюциюнирует с огромной скоростью, и уже грозит приставкой в виде цифры “3?. Огромный потенциал технологии наконец-то начинает реализовыватся. И хотя это все еще очень сыро (о чем говорит хотя бы то, что выпускатся CSS3 будет помодульно), предлагаю оценить некоторые готовые наработки.

 

Теория:

Упор делается на динамику. Собственно, добавленна пара новых селекторов, стилизация форм и других input-элементов во всевозможных состояниях (:active, :hover…), расширенно свойство appearence, добавлен интересный метод использования картинок как границ блока и многое другое. Полный список изменений писать бесполезно – он изменяется на лету. О последних изменениях можно почитать на w3.org, особенно рекомендую про селекторы и User Interface.

 

Практика:

Итак, далее пара работающих примеров из CSS3. Тестировалось все под Firefox 3.5.7, последний Safari тоже должен тянуть, а остальные – уж извините, качайте последний Firefox и наслаждайтесь =)

CSS3 – это вам не щи лаптем хлебать.

 

Закругленные углы и тени:

Тот самый, гуляющий по сети блок, с закругленными углами и тенью

border: solid 1px #FFFFFF;

 -moz-box-shadow: 7px 5px 5px #101010;

 -moz-border-radius:5px;

 -webkit-box-shadow: 7px 5px 5px #101010;

 -webkit-border-radius: 5px; padding: 1px 5px;

Блок под углом:

А это –

Блок, отрисованный

под углом

width: 15em;

 border: solid gray;

 -moz-transform: translate(100px) rotate(20deg);

 -moz-transform-origin: 60% 100%;

 -webkit-transform: translate(100px) rotate(20deg);

 -webkit-transform-origin: 60% 100%;

color:#DD0000;

 padding: 1px 5px;

Полупрозрачный блок:

Блок,

прозрачный на 50%

background-color: rgba(0, 54, 105, .5);

width:250px;

height:100px;

font-size:16px;

padding:3px 5px;

Элементы, меняющие размер при наведении:

-moz-transform: scale(1.50);

-webkit-transform: scale(1.50);

Организация текста в колонки (только для Firefox):

-moz-column-count:3;

-moz-column-rule: solid 1px gray;

-moz-column-gap: 20px;

Итог:

 

Вот такие зарисовки.



Рейтинг: 4.6/5, основан на 25 голосах.


Нравится



Вернутся назад


   

Вам будет интересно:

Поиск хостинга для ASP. NET 2.0

Большинство наших хостингов предлагает около 100 мегабайт места, база данных при этом обычно отсутствует или MySql в районе 10-20 метров.

Сказка о том, как подружить Java Script и PHP

Требуется реализовать страницу загрузки *. mp3 файлов на сервер, в формате – оформить альбом, выбрать на компьютере загружаемые файлы

Создание нестандартных настроек WP-темы

Объясню, в частности, как организовать загрузку файла юзера, с последующим использованием его в теме.

Введение в Ajax

Prototype предоставляет разработчику простой кросс-браузерный инструментарий для осуществления Ajax-запросов.



  •  Публикации


8 методов раскрутки своего форума с нуля

8 методов раскрутки своего форума с нуля Итак, у вас имеется свой собственный форум, но его никто не посещает? Мы готовы помочь вам справиться с этой нелегкой проблемой.

Как привлекать посетителей на проект

Как привлекать посетителей на проект Данная статья в основном рассчитана на тех, кто самостоятельно занимается продвижением своего проекта.

Про MySQL, серверы и PayPal

Про MySQL, серверы и PayPal Проклял все настройки кодировок, проклял DirectAdmin и еле-еле нашел то место где располагается и задается общий пароль для ...

Реклама в Твиттере. Как подать свой продукт

Реклама в Твиттере. Как подать свой продукт Твиттер уже давно стал из нового web 2. 0 сервиса рекламной площадкой с огромным количеством потенциальных пользователей ...

Пока блог на локалхосте

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

Авторитет блоггера притягивает

Авторитет блоггера притягивает Долго не знал с чего начать данную статью. Статья что-то типа мыслей вслух и философии.