Твит

Когда сайт подгружается, можно сделать так чтобы пользователь не смотрел на появление отдельных частей сайта, а дождался загрузки всего сайта и увидел его полностью загруженный вариант. Для этого используются прогресс бары. И обычно делается так, что основная часть затемняется, а видно только прогресс бар. И сегодня я хочу представить 3 вида анимации при загрузке на CSS3.

Пример 3-х прогресс баров можно увидеть на сайте.

Твит

Меню на сайте является очень важным его элементом. И что более важно, на вашем сайте должно быть очень удобное и интуитивнопонятное меню, чтобы пользователи могли легко перемещаться по сайту, а также оно должно быть красиво оформлено. Мы будем использовать HTML5. Каждый элемент меню размещается в блоке div, который не имеет идентификатора и класса/

Пример аннотаций можно увидеть на сайте, а также скачать его.

Твит

Когда создаешь статью, часто есть необходимость показать на изображении какие-то важные места. И хочется сделать это наиболее красиво, удобно и понятно. И в этой статье мы рассмотрим как с помощью CSS3 можно создать красивый эффект аннотаций с наложением. Вся конструкция состоит из изображения, которое показывается изначально, и элементов, которые появляются при клике.

Пример аннотаций можно увидеть а сайте.

Твит

При оформлении изображений, зачастую приходится искать способы красиво и компактно представить изображения и подписи к ним, а также чтобы переходы были ооочень красивыми. Так вот сегодня я хочу представить 4 вида переходов используя лишь CSS3 без javascript - и это влияет на загрузку конечно. Каркас будет состоять из кнопок(радио) с названиями и контейнера для изображения с описанием и заголовком.

Все представлены 4 эффекта. Их можно увидеть на сайте.

Твит

При загрузке страницы, много времени тратится на загрузку изображений, а что если объединить все изображения? Ведь загрузка будет происходить явно быстрее. А ведь CSS позволяет это сделать. И в этом уроке мы создадим красивое меню с помощью CSS и всего одним изображением. Представляете насколько быстрее будет загружаться сайт, если будет подругажаться одно изображение, вместо нескольких.

Пример меню можно увидеть на сайте.

Твит

Сейчас практически на любом сайте можно найти элемент, который создает эффект объема. Он очень интересно смотрится и привлекает взгляд. И в этой статье я расскажу как создать 3D ленточку, которую можно будет применить, например, при оформлении записей на своём сайте или чтобы выделить какой-то заголовок, а также для многого другого.

Пример ленточки можно увидеть на сайте. А также скачать исходники и пользоваться :)

Твит

Я уже писал о том, как можно создать собственную иконку на чистом CSS без изображений. Отсутствие изображений влияет на скорость загрузки страницы. Ведь тем быстрее загрузится, тем лучше, и тем больше вероятность что пользователь продолжит просматривать ваш сайт. Поэтому рекомендую максимально уменьшить количество изображений на странице, а остальные максимально оптимизировать.

В этой статье я хочу вам представить набор иконок на чистом CSS3. Это экспериментальная версия иконок.

Твит

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

Давным давно…

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

Я сразу понял что партнерские программы это сложно и начал пробовать другие способы. Я кликал по ссылкам и вводил каптчи, но дело в том, что я не просто два дня повводил и бросил, а недели две потратил на это бесполезное занятие. В итоге я заработал около 2.5$. А снять с этого сервиса можно было только более 5$. Тут я понял что это всё ерунда и искал дальше.

Твит

Из, казалось бы, совсем незаметных мелочей строится весь сайт. И одну уникальную красивую деталь в этом уроке мы создадим. Это будет эффект загнутого угла без использования изображений и дополнительной разметки. Данный эффект будет хорошо работать во всех современных браузерах.

Пример данного эффекта можно увидеть на сайте.

Браузеры, которые полноценно поддерживают данный эффект: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Твит

Как уже надоели обычные кнопки, они повсюду, на всех сайтах одинаковы. А ведь свой сайт хочется сделать особенным! И в этом вам поможет данная статья, в которой мы рассмотрим как создать анимиронную кнопку на CSS3.

С помощью этого метода вы любую ссылку на странице сможете превратить в анимированную кнопку. Мы не будем использовать javascript, что очень важно.

Пример кнопок можно увидеть на сайте.

Твит

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

В этом уроке я собираюсь рассказать о таком способе как создание эффекта куба при наведении на кнопку используя CSS3.