Тарифы Услуги Сим-карты
Развернуть
Главная ›

Пример красивых контейнеров css html. Логотипы на чистом CSS. Фоны на разных слоях

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

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

Еще оформление элементов на сайте:

Описание эффекта: у блока есть скрытая часть и видимая. Видимая часть — это иконка и название выгоды, а скрытая часть — это подробное описание выгоды, которое появляется при наведении. Также при наведении добавляется активному блоку для создания эффекта объема.

Чтобы увидеть эффекты перейдите на страницу с примером:

Скачать

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: .

Вот как выглядит блок при наведении:

Как сделать красивое оформление для своего продающего сайта?

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами , которые будем использовать для описания:

1 <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div class = "bulletsBlock" > <div class = "bullet-item" > <span class = "iconBullet fa fa-cog" > <p class = "titleBullet" > Выгода 1</ p > <p class = "hideText" > Дополнительный<br > скрытый текст 1</ p > </ div > <div class = "bullet-item" > </ div > <div class = "bullet-item" > </ div > </ div >

Несколько слов по структуре:

  • Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
  • Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
  • Строка: 3 — иконка блока.
  • Строка: 4 — видимая часть с описанием выгоды.
  • Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 .bulletsBlock :after { content : "" ; display : table ; clear : both ; } .bulletsBlock > div { width : 30% ; float : left ; background : rgba(0 , 0 , 0 , 0.3 ) ; margin-left : 5% ; text-align : center ; position : relative ; padding-bottom : 31.7% ; cursor : pointer ; -webkit-transition : all 0.35s linear ; transition : all 0.35s linear ; } .bulletsBlock > div:first-child { margin-left : 0 ; } /*Тень снизу у блока при наведении*/ .bulletsBlock > div:hover { -webkit-box-shadow : 0 35px 35px -35px #000000 ; -moz-box-shadow : 0 35px 35px -35px #000000 ; box-shadow : 0 35px 35px -35px #000000 ; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .bullet-item span{ line-height : 1.5em ; font-size : 12.5em ; color : #fff ; position : absolute ; top : 0 ; left : 0 ; display : block ; width : 100% ; -webkit-transition : all 0.35s ease; transition : all 0.35s ease; } /*Анимация иконки при наведении - уменьшение и сдвиг вверх*/ .bulletsBlock > div:hover span.iconBullet{ line-height : 1.35em ; font-size : 10.625em ; top :-2 .7% ; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 .titleBullet , .hideText { position : absolute ; left : 0 ; bottom : 0 ; text-align : center ; width : 100% ; margin : 0 ; color : #fff ; -webkit-transition : all 0.35s ease; transition : all 0.35s ease; } .titleBullet { line-height : 2.5em ; font-size : 2.1875em ; background : #3B3B3B ; z-index : 10 ; } .hideText { line-height : 1.3em ; font-size : 1.25em ; padding : 1em 0 ; background : #3B3B3B ; font-weight : 300 ; z-index : 8 ; height : 50px ; -webkit-transition : all 0.35s linear 0.2s; transition : all 0.35s linear 0.2s; } /*Анимация при наведении видимого текстового блока*/ .bulletsBlock > div:hover p.titleBullet{ bottom : 80px ; } /*Анимация при наведении скрытого текстового блока*/ .bulletsBlock > div:hover p.hideText{ background : #454545 ; }

Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование!important и так далее... Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.

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

В этом уроке мы затронем эти темы, но перед этим давайте посмотрим на несколько примеров очистки CSS кода.

Несколько полезных методов

Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:

Быстрый доступ к элементам

Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, Mozilla Firebug или Chrome Developer Tools. Используя данные инструменты, мы можем быстро находить то, что нам нужно, и тут же менять, видя результат.

Searchform > .searchsubmit { width: 14%; height: 25px; background: transparent url(images/icon_magnify.png) 0 0 no-repeat; outline: 1px solid red }

В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных - цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.

Добавление тестовых стилей

Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.

Searchform > .searchsubmit { width: 14%; height: 25px; background: transparent url(images/icon_magnify.png) 0 0 no-repeat; margin: -2px 0 0 0; }

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

Отключение стилей

Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:

Social a { -moz-transition: opacity 0.3s ease 0s; x-display: block; height: 35px; opacity: 0.4; }

Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.

Очистка и оптимизация CSS кода

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

Макро-оптимизация

Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.

Формирование информации и определение структуры таблицы стилей

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

/* информация о таблице стилей для XyZ Corp Файл создан: 09.15.2010 Последнее обновление: 06.04.2012

Знак “=” в последнем выражении используется исключительно для упрощения поиска отдельно взятой секции.

Аннотации и отображение вложенность

Аннотации и отображение вложенности элементов помогают разработчику отследить начало и конец какого-то блока. Таким образом, отдельные кусочки кода будут быстро находиться.

Аннотации формируются с помощью следующих выражений: или просто .

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

Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.