[CSS]Уроки для чайников - Форум Cheat-Master.ru

Страница 1 из 1 1
Модератор форума: Sanoxxx, Alowir

[CSS]Уроки для чайников (Начинающий web-программист.)

[CSS]Уроки для чайников

Валерьянка	Дата: Пятница, 12.08.2016, 22:26 \| Сообщение # 1
ТОП БАРЫГА Сообщений: 201 Статус: Offline	http://cheat-master.ru/forum/130-632567-1 < ----- В данной теме все уроки по HTML Блокнот Прямые руки Первый урок - "Анимированную кнопку на CSS3" Для начала в HTML вставим код кнопок, которым CSS дадим свойства: Код <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Демо \| Анимированные кнопки</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <div class="content"> <div class="button-wrapper"> <a href="#" class="a-btn"> <span class="a-btn-slide-text">Нет</span> <!-- Текст после наведения --> <img src="images/5.png" alt="Уточка"> <!-- Картинка до наведения --> <span class="a-btn-text"><small>CHEAT-MASTER.RU &</small> СТАТЬ ЧИТЕРОМ</span> </a> <a href="#" class="a-btn"> <span class="a-btn-slide-text">Нет</span> <img src="images/5.png" alt="Учеба"> <span class="a-btn-text"><small>CHEAT-MASTER.RU &</small> БЫТЬ БОГОМ</span> </a> <a href="#" class="a-btn"> <span class="a-btn-slide-text">Не удачник</span> <img src="images/5.png" alt="Птичка"> <span class="a-btn-text"><small>CHEAT-MASTER.RU &</small> ПОПЫТАТЬ УДАЧУ</span> </a> <a href="#" class="a-btn"> <span class="a-btn-slide-text">Окок</span> <img src="images/5.png" alt="Усталость"> <span class="a-btn-text"><small>CHEAT-MASTER.RU &</small> ПЩЩЩЩЩ</span> Создаете папку "style" Добавляете код снизу Чтобы сохранить файл, нажимаете "Файл" ---> "Сохранить как"---> "Все файлы" ---> "style.css" PROFIT Код .a-btn{ background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:90px; padding-right:35px; height:90px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out; } .a-btn img{ position:absolute; left:15px; top:13px; border:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .a-btn .a-btn-slide-text{ position:absolute; font-size:36px; top:18px; left:18px; color:#bde086; text-shadow:0px 1px 1px rgba(0,0,0,0.3); -webkit-transform:scale(0); -moz-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); opacity:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } .a-btn-text{ padding-top:13px; display:block; font-size:30px; text-shadow:0px -1px 1px #5d81ab; } .a-btn-text small{ display:block; font-size:11px; letter-spacing:1px; } .a-btn:hover{ -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{ opacity:0; } .a-btn:hover .a-btn-slide-text{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); } .a-btn:hover{ opacity:1; background-color:#bc3532; } .a-btn:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; } .a-btn:active { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } </a> </div> </div> </div> </body></html> При выделение данной кнопки : Второй урок - "Изогнутые углы на CSS3" HTML часть Код HTML очень простой, мы помещаем текст внутри блока <div> с классом note: Код <div class="note"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p> </div> CSS часть Сперва нам для блока необходимо сделать позиционирование relative, чтобы мы могли внутри позиционировать другие элементы: Код .note { position:relative; width:480px; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } А сейчас, собственно, «загнем» угол нашего блока: Код .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; display:block; width:0; } И добавим тень: Код .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; display:block; /* Это свойство для того чтобы Firefox 3.0 правильно отображал позиционирование / width:0; / Это свойство для того чтобы Firefox 3.0 правильно отображал позиционирование */ -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); И вот собственно что получилось: Маагазин аккаунтов - http://cheat-master.ru/shop/user/505313/goods Магазин виртов - http://cheat-master.ru/forum/111-636271-1 Мои контактные данные : https://vk.com/rider_bmxer Сообщение отредактировал Валерьянка - Пятница, 12.08.2016, 23:14