Адаптивная Фото галерея
Читатель написал мне, что Галерея изображений с CSS3, которую я представил около года назад, не правильно видна с мобильного телефона. Есть по крайней мере две причины, по которым у этой галереи нет адаптивного дизайна.
Первая причина заключается в том, что он был создан с использованием табличного кода, созданного с помощью Windows Live Writer, предшественника Open Live Writer, который автоматически вставляет ширину в ту же таблицу. Вторая причина заключается в том, что изображения слишком большие, чтобы правильно отображаться рядом на маленьком экране смартфона.
Поэтому я решил обновить пост, чтобы сделать эту галерею изображений адаптивной. Я также добавлю небольшую теорию, чтобы, по крайней мере, самые опытные читатели могли самостоятельно решать эти проблемы, поскольку правильный мобильный дизайн не только будет одной из мантр будущего, но он уже присутствует.
Сначала я удалил ширину из кода таблицы, чтобы он стал адаптивным . Затем я работал над модификацией кода галереи, создавая правила CSS для разных разрешений экрана. Если вдаваться в подробности, если мы хотим, например, чтобы CSS действовал только для планшетов, мы должны использовать код, подобный следующему
@media screen and (min-width: 480px) and (max-width: 768px) {
/* Qui vanno le regole CSS per i tablet */
}
действительно для разрешений экрана от 480 до 768 пикселей . С тегами медиа-запросов и схожим синтаксисом можно будет вставлять CSS на 2, 3, 4 или даже больше интервалов разрешения . Вы также можете установить различные CSS для отображения портрет ( по вертикали) или пейзаж(горизонтальный) клетки. Таким образом, код Галереи был разбит таким образом
<style>/* CSS DESKTOP */@media screen and (min-width: 769px) {.view { background-color:#FFFFFF; /* colore di sfondo */ border: 10px solid #FFFFFF; /* stile del bordo */ box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */ cursor: default; float: left; height: 200px; /* altezza della immagine */ margin: 10px; overflow: hidden; position: relative; text-align: center; width: 250px; /* larghezza della immagine */}.view .mask, .view .content { height: 200px; /* altezza del box */ left: 0; overflow: hidden; position: absolute; top: 0; width: 250px; /* larghezza del box */}.view img { display: block; position: relative;}.view h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: #FFFFFF !important; font-size: 17px; margin: 20px 0 0; padding: 10px; position: relative; text-align: center; text-transform: uppercase;}.view p { color: #FFFFFF !important; font-family: Georgia,serif; /* Famiglia di font */ font-size: 12px; /* dimensione caratteri */ font-style: italic; /* Corsivo */ padding: 10px 20px 20px; position: relative; text-align: center;}.view a.info { display: inline-block; padding: 7px 14px; text-decoration: none; text-transform: uppercase;}.mask {font-size: 17px; /* Dimensione Titolo Centrale */}}/* CSS DESKTOP *//* CSS TABLET */
@media screen and (min-width: 480px) and (max-width: 768px) {
.view {
background-color:#FFFFFF; /* colore di sfondo */
border: 10px solid #FFFFFF; /* stile del bordo */
box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */
cursor: default;
float: left;
height: 200px; /* altezza della immagine */
margin: 5px;
overflow: hidden;
position: relative;
text-align: center;
width: 250px; /* larghezza della immagine */
}
.view .mask, .view .content {
height: 200px; /* altezza del box */
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 250px; /* larghezza del box */
}
.view img {
display: block;
position: relative;
}
.view h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
color: #FFFFFF !important;
font-size: 17px;
margin: 15px 0 0;
padding: 5px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.view p {
color: #FFFFFF !important;
font-family: Georgia,serif; /* Famiglia di font */
font-size: 12px; /* dimensione caratteri */
font-style: italic; /* Corsivo */
padding: 10px 20px 20px;
position: relative;
text-align: center;
}
.view a.info {
display: inline-block;
padding: 7px 14px;
text-decoration: none;
text-transform: uppercase;
}
.mask {font-size: 16px; /* Dimensione Titolo Centrale */}
}
/* CSS TABLE */@media screen and (min-width: 480px) and (max-width: 768px) {.view { background-color:#FFFFFF; /* colore di sfondo */ border: 10px solid #FFFFFF; /* stile del bordo */ box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */ cursor: default; float: left; height: 200px; /* altezza della immagine */ margin: 5px; overflow: hidden; position: relative; text-align: center; width: 250px; /* larghezza della immagine */}.view .mask, .view .content { height: 200px; /* altezza del box */ left: 0; overflow: hidden; position: absolute; top: 0; width: 250px; /* larghezza del box */}.view img { display: block; position: relative;}.view h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: #FFFFFF !important; font-size: 17px; margin: 15px 0 0; padding: 5px; position: relative; text-align: center; text-transform: uppercase;}.view p { color: #FFFFFF !important; font-family: Georgia,serif; /* Famiglia di font */ font-size: 12px; /* dimensione caratteri */ font-style: italic; /* Corsivo */ padding: 10px 20px 20px; position: relative; text-align: center;}.view a.info { display: inline-block; padding: 7px 14px; text-decoration: none; text-transform: uppercase;}.mask {font-size: 16px; /* Dimensione Titolo Centrale */}}/* CSS TABLE *//* CSS SMARTPHONE */
@media screen and (max-width: 479px) {
.view {
background-color:#FFFFFF; /* colore di sfondo */
border: 4px solid #FFFFFF; /* stile del bordo */
box-shadow: 1px 2px 3px #696969; /* ombreggiatura del bordo */
cursor: default;
float: left;
height: 140px; /* altezza della immagine */
margin: 2px;
overflow: hidden;
position: relative;
text-align: center;
width: 152px; /* larghezza della immagine */
}
.view .mask, .view .content {
height: 140px; /* altezza del box */
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 152px; /* larghezza del box */
}
.view img {
display: block;
position: relative;
}
.view h2 {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
color: #FFFFFF !important;
font-size: 14px;
margin: 4px 0 0;
padding: 2px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.view p {
color: #FFFFFF !important;
font-family: Georgia,serif; /* Famiglia di font */
font-size: 10px; /* dimensione caratteri */
font-style: italic; /* Corsivo */
padding: 4px 4px 4px;
position: relative;
text-align: center;
}
.view a.info {
display: inline-block;
padding: 2px 5px;
text-decoration: none;
text-transform: uppercase;
}
.mask {font-size: 14px; /* Dimensione Titolo Centrale */}
}
/* CSS SMARTPHONE */@media screen and (max-width: 479px) {.view { background-color:#FFFFFF; /* colore di sfondo */ border: 4px solid #FFFFFF; /* stile del bordo */ box-shadow: 1px 2px 3px #696969; /* ombreggiatura del bordo */ cursor: default; float: left; height: 140px; /* altezza della immagine */ margin: 2px; overflow: hidden; position: relative; text-align: center; width: 152px; /* larghezza della immagine */}.view .mask, .view .content { height: 140px; /* altezza del box */ left: 0; overflow: hidden; position: absolute; top: 0; width: 152px; /* larghezza del box */}.view img { display: block; position: relative;}.view h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: #FFFFFF !important; font-size: 14px; margin: 4px 0 0; padding: 2px; position: relative; text-align: center; text-transform: uppercase;}.view p { color: #FFFFFF !important; font-family: Georgia,serif; /* Famiglia di font */ font-size: 10px; /* dimensione caratteri */ font-style: italic; /* Corsivo */ padding: 4px 4px 4px; position: relative; text-align: center;}.view a.info { display: inline-block; padding: 2px 5px; text-decoration: none; text-transform: uppercase;}.mask {font-size: 14px; /* Dimensione Titolo Centrale */}}/* CSS SMARTPHONE *//* CSS COMUNE A TUTTE LE RISOLUZIONI */.view-third img { box-shadow: 0 0 1px #000000;-webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}.view-third .mask { color:#FFF !important; background-color: rgba(0,0,0,0.6); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out;}.view-third h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.view-third p { color:#FFF !important; -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.view-third a.info {color:#FFF !important;-webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.view-third:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px);}.view-third:hover h2 {background: none repeat scroll 0 0 #9C1813; /* Colore del Titolo */ border-top: 1px solid #000; /* Colore del bordo superiore del titolo */ border-bottom: 1px solid #000; /* Colore del bordo inferiore del titolo */ text-shadow: 0px 1px 1px #111; /* Ombra del titolo */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s;}.view-third:hover p { color:#FFF !important; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s;}.view-third:hover a.info {background: none repeat scroll 0 0 #9C1813; /* Colore di sfondo del link */border: 1px solid #000; /* Colore del bordo del Read More */ color:#FFFFFF; /* Colore del link Read More */ text-shadow: 0px 1px 1px #111; /* Ombra del link Read More */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}/* CSS */</style><div align=»center»><table border=»0″ cellpadding=»2″ cellspacing=»4″ style=»width: 100%;»><tbody><tr> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-kpQ1eoy0w74/VXagKWVC_9I/AAAAAAAAteo/y_gKI0xyZbk/s250/mongolfiere.jpg» /><div class=»mask»><h2>MONGOLFIERE</h2>Raduno di mongolfiere<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-mK7OCfx0d20/VXagNWLaoII/AAAAAAAAtew/nJfH-w2Bjo0/s250/montagne.jpg» /><div class=»mask»><h2>MONTAGNE</h2>Scorcio montano<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> </tr><tr> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-fvxyrX-Ig0I/VXagPaJNVsI/AAAAAAAAte4/UoOEYtRIZKc/s250/nubi.jpg» /><div class=»mask»><h2>Cielo plumbeo</h2>Cielo nuvoloso con raggi di sole<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-P_4obzUnMPc/VXagRvc7dPI/AAAAAAAAtfA/-bqYmVKvCOc/s250/pianta.jpg» /><div class=»mask»><h2>PIANTA TROPICALE</h2>Pianta dalla forma suggestiva<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> </tr><tr> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-xMnCKtTdi3E/VXajx7XKBDI/AAAAAAAAtfc/2WGt-3exf9g/s250/cavalli.jpg» /><div class=»mask»><h2>CAVALLI NEL DESERTO</h2>Cavalli e cavalieri berberi<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> <td><div class=»view view-third»><img src=»http://lh3.googleusercontent.com/-7tyINx7YutI/VXajoJdhpZI/AAAAAAAAtfU/f7BEE25A3mo/s250/pesce.jpg» /><div class=»mask»><h2>PESCATORI E PESCE</h2>Pesce di fiume esce dall’acqua<a class=»info» href=»http://goo.gl/mYEisH«>Leggi tutto</a></div></div></td> </tr></tbody></table></div>
Этот код должен быть вставлен в режиме HTML на статическую страницу WordPress или Bloggerи и опубликован как обычно. Чтобы было понятнее, я выделил CSS для рабочего стола желтым, для планшета зеленый, а для смартфона — бежевый.
Наиболее важные настройки следующие:
- Была использована таблица из трех строк и двух столбцов . Вы можете изменить эту структуру, помня, что строка начинается с тега <tr> и заканчивается </tr>, в то время как отдельная ячейка начинается с тега <td> и заканчивается тегом </td>.
- cellpadding = «2» cellspacing = «4» устанавливает экземпляр d соответственно между содержимым ячейки и ее краем и содержимым различных ячеек.
- В цветовые коды различных элементов и затенения могут быть изменены по желанию. Менее опытный может проконсультироваться о том, как конвертировать HEX в RGB и наоборот.
- Галерея оживает, когда курсор наведён на изображение. Будут отображены три текста « Заголовок», «Описание», «Подробнее», которые необходимо выбрать для каждой загруженной фотографии .
- Изображения могут быть загружены в Google фото для получения прямой ссылки
- Преобразование, или анимация, индуцированное CSS3 имеет продолжительность от 0,2 до 0,5 секунд. Если вы не особенно опытны, не трогайте эти параметры.
- Галерея находится по центру в статической странице, тег выделен серым.
- URL-адреса http://goo.gl/mYEisH должны быть заменены ссылками на посты, связанные с фотографиями.
Если ваш шаблон Blogger или тема WordPress не показывали вам галерею в одном из этих трех разрешений, вы можете попытаться изменить ширину фотографий, размер символов, поля расстояния между различными элементами и отступы или расстояние между элементом и контейнером. После создания других ячеек таблицы вы можете добавить больше изображений с этим кодом
<div class = «view view-third»> <img src = » URL изображения » /> <div class = «mask»> <h2> Title </ h2> <p> Описание изображения </ p> <a class = «info» href = » URL ссылки «> Читать все </a> </ div> </ div>
Эта Галерея фотографий, а также обладающая прерогативой быть адаптивной , полностью реализована с помощью CSS3 без использования javascript и следовательно она быстро загружается.
