Автор

Интересный пример с наложением сетки на 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

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


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

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


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

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


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

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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close