В този урок аз ще ви покажа как да се пресъздаде ефекта на лъскава изображение с CSS3 градиенти.
HTML структура
Така че, в този кратък мини-урок, ние ще използваме основната структура на HTML5. С най-малък брой възможни варианти, тъй като желаният ефект трябва да се постигне най-вече с помощта на CSS. Ето защо, най-добре е да се запази HTML като чиста и семантичен възможно най-скоро.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Така че, в допълнение към виртуална структура и тайна, ние имаме основание има само един елемент DIV (със снимка клас), в който се поставя етикет IMG.
Това е цялата HTML! Сега нека да се премести в раздела за CSS.
Първо, точно определен стил на страница, за да бъде в състояние да се пребори с член снимка. Тук можем само да добавим, за всички, цвета на фона и да зададете страницата за опаковане DIV.
Присвояване на стилове DIV-ин с снимка
Следващата стъпка е да се възложи стилове, съдържащи DIV. Тук ние определяме височината и ширината на блока. На този етап това е най-важната задача, както и длъжност на стойността на имотите по отношение на. Всички останали - само за естетически цели. Подобно на прохладната сянка на двойна блок и около цялата рамка на изображението в 1 пиксел.
Сега картинката изглежда добре. Но ние правим нещо не е достатъчно - много лъскава ефект. И това - последния етап от този мини-урок.
Присвояване на стилове псевдо-елемент снимка: преди
Това е най-важната стъпка от всички ефект, ние ще зададете псевдо-елемент стил Разделение: преди. По този начин, можете да създадете стил гланцови снимки в горната част на формата, без да се налага да се добави допълнително маркиране HTML. Тя е по-семантичен. Ние абсолютно позициониране на елемент в горната част на снимката (това е защо е толкова важно да се създаде положение в предишната стъпка: роднина) и да използва CSS3 градиенти на фона на тази нова псевдо.
Знам, че всички тези номера начинаещите дизайнери изглеждат доста обезкуражаващи. Но те са по същество стойности RGBA (цветови стойности, с които можем да приложим непрозрачност) в рамките на "stop'ov" градиентите. Как да се обясни какво се случва ... имаме две половини на наклона, като се започне от горния ляв до долния десен. През първата половина започва с пълна прозрачност до 50% прозрачен бял. Втората половина е обратно към пълна прозрачност (това е как да създадете диагонала) и така остава.
заключение
Надявам се да се радвате на този урок и полезна.
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии