6 Готини снимки с CSS3
CSS3 е наистина мощен. В миналото е необходимо да имаме изображения или куп JavaScript codelines, за да направим прост ефект на преход. Днес можем да направим същото само с CSS3.
В този урок ще ви покажем как да създавате надписи с различни преходи, просто използвайки CSS3.
- Демонстрация
- Изтегляне на източника
Поддръжка на браузър
Този надпис ще зависи много от свойствата на трансформацията и прехода, които са относително нови функции, така че би било разумно да се вземе под внимание поддръжката на браузъра, необходима за гладкото изпълнение на надписа..
По-долу са браузъри, които вече поддържат преобразуване и преход:
- Internet Explorer 10+ (все още не е пуснат)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Сега, нека започнем с урока.
Структура на HTML
Имаме 6 изображения; всяко изображение с различен стил на надписи.
Обикновено надпис
Пълен надпис
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, сед диам nonummy nibh euismod tincidunt ут laoreet dolore magna aliquam erat volutpat.
Избледняване на надписа
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, сед диам nonummy nibh euismod tincidunt ут laoreet dolore magna aliquam erat volutpat.
Надпис с плъзгане
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, сед диам nonummy nibh euismod tincidunt ут laoreet dolore magna aliquam erat volutpat.
Това е ротационен надпис
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, сед диам nonummy nibh euismod tincidunt ут laoreet dolore magna aliquam erat volutpat.
Свободен стил
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, сед диам nonummy nibh euismod tincidunt ут laoreet dolore magna aliquam erat volutpat.
Основен CSS
Преди да се стилизира всеки елемент, винаги е добро начало за нулиране на всички свойства, използвайки това CSS нулиране и да им даде стойностите им по подразбиране, така че всички браузъри ще визуализират един и същ резултат (освен може би, IE6).
Стиловете ще бъдат разделени в style.css файл, така че нашия HTML файл ще изглежда чист. Не забравяйте обаче да добавите стил на връзката вътре в тага за главата, за да приложите правилата за оформяне във файла.
Добре, нека започнем да оформяме елемента, започвайки от html етикета и основния идентификатор на обвивката:
html фонов цвят: #eaeaea; #mainwrapper font: 10pt нормален Arial, sans-serif; височина: автоматично; марж: 80px авто 0 авто; text-align: center; ширина: 660px;
Стил на кутията с изображения
Прилагаме някои общи стилове в полетата, съдържащи изображенията. Кутиите ще се показват рамо до рамо с помощта на левия плувка. Забележете, че добавихме и препълване: скрито свойство; това ще направи всички обекти вътре, които преминават през div, да бъдат скрити.
Ние също така декларираме свойство за преход на всяко изображение в кутията, в случай че по-късно ще ни е необходим преходен образ.
#mainwrapper .box border: 5px solid #fff; курсор: указател; височина: 182px; поплавък: наляво; марж: 5px; позиция: относителна; overflow: hidden; ширина: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; кутия сянка: 1px 1px 1px 1px #ccc; #mainwrapper .box img позиция: абсолютна; наляво: 0; -webkit-transition: всичките 300ms се освобождават; -moz-transition: всичките 300ms се освобождават; -о-преход: всичките 300мс се освобождават; -ms-transition: всички 300ms се освобождават; преход: всичките 300мс се освобождават;
Надпис Общ стил
Надписът ще има някои общи стилове и също свойство на преход. Вместо да използваме свойствата на непрозрачност, използваме цветен режим RGBA с 0.8 за алфа канала, за да направим надписа малко прозрачен, без да засягаме вътрешността на текста.
#mainwrapper .box .caption цветен фон: rgba (0,0,0,0,8); позиция: абсолютна; цвят: #fff; z-индекс: 100; -webkit-transition: всичките 300ms се освобождават; -moz-transition: всичките 300ms се освобождават; -о-преход: всичките 300мс се освобождават; -ms-transition: всички 300ms се освобождават; преход: всичките 300мс се освобождават; наляво: 0;
Надпис 1
Първият надпис ще има прост ефект на преход, който обикновено се използва за надпис. Надписът ще излезе отдолу, когато задържим мишката върху изображението. За да го адресира, надписът ще има фиксирана височина от 30 пиксела и ще приложим долната му позиция -30px, за да го скрием под изображението.
#mainwrapper .box .simple-caption височина: 30px; ширина: 200px; дисплей: блок; дъното: -30px; line-height: 25pt; text-align: center;
Надпис 2
Вторият тип има пълната ширина и височина на размерите на изображението / кутията (200x200px), а преходът ще бъде като ефект на плъзгащата се врата само, че ще се плъзга отгоре надолу.
#mainwrapper .box .full-caption ширина: 170px; височина: 170px; отгоре: -200px; text-align: left; пълнеж: 15px;
Надпис 3
Третото заглавие ще има избледняващ ефект. Така добавихме непрозрачност: 0 за първоначалното му състояние.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption непрозрачност: 0; ширина: 170px; височина: 170px; text-align: left; пълнеж: 15px;
Надпис 4
Четвъртият надпис ще се плъзга отляво надясно, така че фиксирахме 200 пиксела наляво (вляво: 200 пиксела) като първоначална позиция.
** Надпис 4: Слайд ** / #mainwrapper .box .slide-caption width: 170px; височина: 170px; text-align: left; пълнеж: 15px; наляво: 200px;
Надпис 5
Петият надпис ще има въртящ ефект. Не само заглавието ще се върти, но и изображението. По-скоро е смяна на позицията чрез въртене.
Така че, добавяме свойство за преобразуване с въртене от -180 градуса, освен ако предпочитате да въртите монитора си, за да чете надписа.
#mainwrapper # box-5.box .rotate-caption width: 170px; височина: 170px; text-align: left; пълнеж: 15px; отгоре: 200px; -moz-transform: завъртане (-180deg); -o-transform: завъртане (-180deg); -webkit-transform: завъртане (-180deg); преобразуване: завъртане (-180deg); #mainwrapper .box .rotate ширина: 200px; височина: 400px; -webkit-transition: всичките 300ms се освобождават; -moz-transition: всичките 300ms се освобождават; -о-преход: всичките 300мс се освобождават; -ms-transition: всички 300ms се освобождават; преход: всичките 300мс се освобождават;
Надпис 6
Последният надпис ще има мащабна трансформация. Въпреки това, в предишните надписи текстът вътре в него действително ще се покаже заедно с прехода за преход .caption. В този раздел ще го направим малко по-различен.
Текстът ще се появи, след като бъде извършена промяна на прехода. Така че, добавяме закъснение на прехода върху текста, в този случай h3 и p tag.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: relative; ляво: -200px; ширина: 170px; -webkit-transition: всичките 300ms се освобождават; -moz-transition: всичките 300ms се освобождават; -о-преход: всичките 300мс се освобождават; -ms-transition: всички 300ms се освобождават; преход: всичките 300мс се освобождават; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -о-закъснение при преход: 300ms; -ms-delay-закъснение: 300ms; закъснение при преход: 300ms; #mainwrapper ,. -moz-transition-delay: 500ms; -о-закъснение при преход: 500ms; -ms-delay-закъснение: 500ms; закъснение при преход: 500ms;
Нека да ги преместим
В следващия раздел ще дефинираме поведението на надписа, когато задържите мишката върху изображенията или полетата.
Поведение на надписа 1: Показва се.
За първото заглавие бихме искали тя да се покаже (отдолу), когато задържим мишката над полето. За да се справим с този ход, използваме свойство transform и CSS кода по-долу казва на заглавието да премести 100% от теглото си на върха.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -o-transform: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Ако нямате смисъл да имате отрицателна стойност за translateY, може да искате да прочетете този урок първо, за да получите по-добра представа.
Поведение на надписите 2: Преместете го надолу.
И обратно, второто заглавие ще се придвижи надолу от върха. Така че, ние ще имаме положителна стойност за превод.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -o-transform: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Поведение на надписа 3: Избледняване.
Третото заглавие всъщност е най-лесният. Когато полето е в полето на мишката, непрозрачността на надписите ще се превърне в 1, което го прави видимо, и тъй като добавихме свойство на преход в класа на надписите, преходът трябва да се изпълнява плавно.
#mainwrapper .box: hover .fade-caption непрозрачност: 1;
Поведение на надписа 4: Плъзнете го наляво.
Както споменахме по-рано, този надпис ще се плъзне отляво, но изображението ще се плъзне и надясно. Така че тук имаме 2 CSS декларации.
CSS кодът по-долу показва, че когато задържите курсора на мишката над полето, надписът ще се плъзне 100% от ширината си вляво. Забележете, че сега използваме translateX, защото искаме слайдът да се движи хоризонтално отдясно наляво.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); непрозрачност: 1; transform: translateX (-100%);
Когато задържите мишката над полето, изображението ще се плъзне наляво.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -o-transform: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Поведение на надписите 5: Завъртете го.
Този надпис се различава от останалите, тъй като няма да се движи отдясно или наляво, но ще се върти. Когато кутията е на мишката, divът, съдържащ изображението и заглавието, ще се завърти -180 обратно на часовниковата стрелка, скривайки изображението и показвайки надписа.
/ ** Завъртане на надписа: Поведение при навъртане ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! -moz-transform: завъртане (-180deg); -o-transform: завъртане (-180deg); -webkit-transform: завъртане (-180deg); преобразуване: завъртане (-180deg);
Поведение на надписите 6: Мащабирайте го.
Този надпис ще комбинира няколко ефекта на преобразуване. Когато кутията е върху курсора, изображението ще се увеличи с 140% (1.4) от първоначалното му измерение.
#mainwrapper .box: hover # image-6 -moz-transform: мащаб (1.4); -o-transform: скала (1.4); -webkit-transform: мащаб (1.4); трансформация: скала (1.4);
И ако видяхте CSS по-горе Надпис 6 Заглавието, ние сме скрили текста вляво от 200px. Този CSS код по-долу казва на текста да се премести в първоначалната си позиция. Така текстът ще се плъзне едновременно отляво надясно.
#mainwrapper .box: hover .scale-caption h3, #mainwrapper .box: hover .scale-caption p -moz-transform: translateX (200px); -o-transform: translateX (200px); -webkit-transform: translateX (200px); transform: translateX (200px);
- Демонстрация
- Изтегляне на източника
резюме
Въпреки че тези CSS функции са готини, но все още не са широко приложими, поради ограниченията за поддръжка на браузъра, които споменахме по-рано. Продължавайте обаче да експериментирате с тези нови функции, тъй като по този начин ще оформяме уеб страница в бъдеще.
Кредити
Миниизображенията на изображението в урока се вземат от следните уебсайтове (екранна снимка):
- Книга, отделно
- Archiduchesse
- Влог
- Hongkiat
- Приветствената ферма
- Марк Еко
