Автор

Интересный пример с наложением сетки на CSS

Интересный пример с наложением сетки на CSS


 

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

 

ДЕМО
ИСХОДНИКИ

 

Данные примеры работают во всех современны браузерах, за исключением IE. В демонстрации мы использовали макет iPhone от талантливого дизайнера  Jakub Kejha. И так, давайте приступим.

Шаг 1. HTML

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

<div class="main">
 <div id="ac-wrapper" class="ac-wrapper">
 <h2><font color=#bbd91e>Погода</font> <span>Концепт &amp; UI Дизайн</span></h2>
 <div class="ac-device">
 <a href="#"><img src="images/screen1.jpg"/></a>
 <h3 class="ac-title">Gentrify small batch umami retro vegan</h3>
 </div>
 <div class="ac-grid">
 <a href="#"><img src="images/screen1.jpg"/><span>Gentrify small batch umami retro vegan</span></a>
 <a href="#"><img src="images/screen2.jpg"/><span>Chambray squid semiotics</span></a>
 <a href="#"><img src="images/screen3.jpg"/><span>Fashion axe blue bottle</span></a>
 <a href="#"><img src="images/screen4.jpg"/><span>Photo booth single-origin coffee</span></a>
 <a href="#"><img src="images/screen5.jpg"/><span>Flexitarian synth keytar blog master</span></a>
 <a href="#"><img src="images/screen6.jpg"/><span>Next level retro flexitarian freegan</span></a>
 <a href="#"><img src="images/screen7.jpg"/><span>Pour-over superious meggings terry</span></a>
 <a href="#"><img src="images/screen8.jpg"/><span>Seitan william vinyl chillwave</span></a>
 </div>
 </div>

 

Как только мы нажимаем на элемент сетки, мы будем обновлять содержание устройства контейнера. Давайте перейдем к стилям.

Шаг 2. CSS

Для начала нам необходимо определить общие параметры контейнера и его позиционирование по центру.

.ac-wrapper {
 width: 100%;
 position: relative;
 perspective: 1000px;
 perspective-origin: 50% 25%;
}

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

.ac-device {
 background: url(../images/iPhone.png) no-repeat;
 width: 288px;
 height: 611px;
 margin: 0 auto;
 position: relative;
 transition: all 0.3s ease;
 transform-style: preserve-3d;
}

Для каждой плоскости нам необходимо установить якорь и размеры для отображения на макете:

.ac-device a {
 height: 440px;
 width: 249px;
 display: inline-block;
 margin: 85px 0 0 20px;
}

.ac-device a img {
 display: block;
}

Установим абсолютное позиционирование по правой стороне для плоскостей:

.ac-device h3 {
 position: absolute;
 font-size: 2.5em;
 left: 100%;
 width: 100%;
 top: 60%;
 margin-left: 30px;
 font-weight: 300;
 color: #888;
}

Теперь нам необходимо установить общие параметры стилей для самой сетки, мы хотим отобразить восемь элементов, соответственно у нас будет два ряда по четверо блоков. Мы также добавим переход в -350px по оси Z:

.ac-grid {
 position: absolute;
 width: 620px;
 left: 50%;
 margin-left: -310px;
 height: 100%;
 z-index: 1000;
 top: 0;
 opacity: 0;
 pointer-events: none;
 transform-style: preserve-3d;
 transition: all 0.3s ease;
 transform: translateZ(-350px);
}

Якоря в сетке будут размещены внутри изображений и будут установлены на 100% ширины.

.ac-grid a {
 width: 145px;
 display: block;
 position: relative;
 float: left;
 margin: 10px 5px;
 cursor: pointer;
}

.ac-grid a img {
 display: block;
 width: 100%;
}

Мы привели одни с основных стилей, более детально для каждого примера можно просмотреть в исходниках, теперь давайте взглянем на JavaScript.

Шаг 3. JavaScript

Нам необходимо кэшировать и инициализировать некоторые переменные:

var $el = $( '#ac-wrapper' ),
 // Элемент устройства
 $device = $el.find( '.ac-device' ),
 // Оболочки изображений
 $trigger = $device.children( 'a:first' ),
 // Экраны
 $screens = $el.find( '.ac-grid > a' ),
 // Изображение устройства
 $screenImg = $device.find( 'img' ),
 // Название экрана
 $screenTitle = $device.find( '.ac-title' ),
 // HTML Body элементы
 $body = $( 'body' );

Мы будем связывать события c оболочками изображений (якоря) и на экран элементов.

function init() {
 // Показать сетку
 $trigger.on( 'click', showGrid );
 // Показать сетку, когда нажали на элемент
 $screens.on( 'click', function() {
 showScreen( $( this ) );
 return false;
 } );
}

Когда нажали на плоскость, то нам необходимо убрать "AC-GridView", при этом необходимо обновлять исходное изображение и название на соответствующие элементы:

function showScreen( $screen ) {
$el.removeClass( 'ac-gridview' );
if( $screen ) {
// Обновляем изображение и название
$screenImg.attr( 'src', $screen.find( 'img' ).attr( 'src' ) );
$screenTitle.text( $screen.find( 'span' ).text() );
}
}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Интересный пример с наложением сетки на CSS

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


Интересный пример с наложением сетки на CSS

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


Интересный пример с наложением сетки на CSS

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


Интересный пример с наложением сетки на CSS

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close