17 кроссбраузерных CSS/HTML эффектов

17 кроссбраузерных CSS/HTML эффектовВ этой статье собраны 17 отрывков кодов, при помощи которых возможно создание тех или иных известных эффектов, причём они будут корректно работать во всех браузерах даже в Internet Explorer.
1. Установка минимальной и максимальной ширины шаблона

#content {
	    width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
	    min-width: 760px;
	    max-width: 1240px;
	}

2. Передача цветов или градиентов при помощи RGBA. Для того чтобы этот эффект отображался корректно в IExplorer мы будем использовать специальные фильтры.

.element {
	  background-color: transparent;
	  background-color: rgba(255, 255, 255,0.8);
         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";/*Для IExplorer*/
	}

3. Новый эффект прозрачность также имеет несколько  описаний.

.selector {
	    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 версии*/
	    filter: alpha(opacity=50); /* internet explorer 5~7 версии */
	    -khtml-opacity: 0.5;      /* khtml, старые версии safari */
	    -moz-opacity: 0.5;       /* mozilla, netscape */
	    opacity: 0.5;           /* firefox, safari, opera */
	}

4. Работа с изображениями. Увеличение и поворот на определённый угол.

img {
	    transform:
	        rotate(180deg)
	        scale(-1, 1);
/* Для следующих браузеров  firefox, safari, chrome */
	    -webkit-transform:
	        rotate(180deg)
	        scale(-1, 1);
	    -moz-transform:
	        rotate(180deg)
	        scale(-1, 1);
/* Для  ie */
	    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
/* opera */
	    -o-transform:
	        rotate(180deg)
	        scale(-1, 1);
	}

5. Фон на весь экран. К счастью теперь нам не надо использовать JavaScript, всё можно сделать при помощи CSS стилей, определив несколько классов.

.content {
	    position: relative;
	    width: 760px;
	    z-index: 10;
	 }
.background {
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    z-index:2;
	 }
.portrait {
	        height: 100%;
	    }
.landscape {
	        width: 100%;
	    }
.full {
	        width: 100%;
	        height: 100%;
	    }
	<div class="content">
	    <p>Тздесь будет ваш текст</p>
	</div>
	<div class="background">
	    <img class="full | portrait | landscape" src="imgURL" alt="" />
	</div>

6. Вместо стандартного маркера у списка теперь можно поставить любое изображение.

ul {
	   list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
	}

7. Тени для текстов.

p {
	    text-shadow: #000000 0 0 1px; /*Для всех браузеров за исключением  IE */
	    zoom:1;
	    filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
/*Для IE особое описание*/
	    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
7	}

8. Несколько границ, этот эффект стал доступен только в CSS3.

div {
	    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
	    filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7 и ниже */
	}
div:before {
	    position: absolute;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    border-top: 1px solid #212121; /* Верхняя граница! */
	    content: '';
	}
div:after {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 1px;
	    border-bottom: 1px solid #212121; /* Нижняя граница */
	    content: '';
	}

9. Тени для областей.

.shadow {
	    -moz-box-shadow: 0 0 4px #000;
	    -webkit-box-shadow: 0 0 4px #000;
	    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
	    filter:
	            progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
	            progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
	            progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
	            progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
	    box-shadow: 0 0 4px #000;
	}

10. Закруглённые углы с описанием для каждого отдельного угла.

.rounded  {
	    -moz-border-radius: 10px; /* gecko */
	    -webkit-border-radius: 10px; /* webkit */
	    border-radius: 10px; /*стандартный  CSS3  */
	    -khtml-border-radius: 10px; /* старый konkeror */

	    -webkit-border-bottom-right-radius: 10px;
	    -webkit-border-bottom-left-radius: 10px;
	    -webkit-border-top-right-radius: 10px;
	    -webkit-border-top-left-radius: 10px;

	    -khtml-border-radius-bottomright: 10px;
	    -khtml-border-radius-bottomleft: 10px;
	    -khtml-border-radius-topright: 10px;
	    -khtml-border-radius-topleft: 10px;

	    -moz-border-radius-bottomright: 10px;
	    -moz-border-radius-bottomleft: 10px;
	    -moz-border-radius-topright: 10px;
	    -moz-border-radius-topleft: 10px;

	    border-bottom-right-radius: 10px;
	    border-bottom-left-radius: 10px;
            border-top-right-radius: 10px;
	    border-top-left-radius: 10px;
	 }

11. Вставка нестандартных шрифтов.

@font-face {
	    font-family: 'MandatoryRegular';
	    src: url('font/mandator-webfont.eot');
	    src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
	         url('font/mandator-webfont.woff') format('woff'),
	         url('font/mandator-webfont.ttf') format('truetype'),
	         url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
	    font-weight: normal;
	    font-style: normal;
	}

12.  Красивая вставка цитат при помощи больших кавычек.

blockquote:before {
	    display: block;
	    float: left;
	    margin: 10px 15px 0 0;
	    font-size: 100px; /* Давай-те сделаем большую кавычку */
	    content: open-quote; /* Здесь мы определяем наш  :before как умную кавычку. Здесь может быть любой текст даже HTML  */
	    color: #bababa;
	    text-shadow: 0 1px 1px #909090;
	}

13. Специальные стили для тех, кто будет просматривать вашу страницу в  iPhone4

@media handheld, only screen and (max-width: 767px) {
	    .logo {
	        /* Для небольших разрешений и размеров*/
	        background: url(logo.jpg) no-repeat;
	    }
	}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	    .logo {
	        background: url(logo2x.jpg) no-repeat;
	        background-size: 212px 303px;
	    }
	}

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

/* Смартфоны (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
	    /* Ваши стили */
	}

/* Смартфоны (landscape) ----------- */
	@media only screen
	and (min-width : 321px) {
	    /*Ваши стили */
	}

/* Смартфоны (portrait) ----------- */
@media only screen
	and (max-width : 320px) {
	    /* Ваши стили */
	}

/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px) {
	    /* Ваши стили */
	}

/* iPads (landscape) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
	    /* Ваши стили */
	}

/* iPads (portrait) ----------- */
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : portrait) {
	    /*Ваши стили */
	}

/* Стандартные мониторы ПК и ноутбуков----------- */
	@media only screen
	and (min-width : 1224px) {
	    /* Ваши стили */
	}

/*Большие мониторы ----------- */
	@media only screen
	and (min-width : 1824px) {
	    /* Ваши стили */
	}

/*Для  iPhone 4 ----------- */
	@media
	only screen and (-webkit-min-device-pixel-ratio : 1.5),
	only screen and (min-device-pixel-ratio : 1.5) {
 /* Ваши стили */
	}

15. Установка правильной высоты и переход на начало строки

.clearfix {
	    zoom:1;
	    overflow:hidden;
	}

16. Как правильно убрать текст из зоны видимости.

.hidden  {
	    position: absolute;
	    top: -10000px;
	    left: -10000px;
	 }

17. Вместо негативного значения  text-indent в описании изображения используйте известный alt, т.к. некоторые поисковые боты распознают текст даже при негативном значении, что плохо отражается на ранге сайта.

<h1><img src="myLogo" alt="Логотип моей компании" /></h1>

Переведено со статьи Рочистира Оливира.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *