| Kosten | Вторник, 12 Ноября 2019, 20:23 | Сообщение 1 |
| Это шаблон логотипа на основе CSS в виде значка с баннером, созданный с использованием CSS и HTML. Шрифты импортируются в форму с их URL. Стили для класса установлены как font-family как 'Raleway', Arial, sans-serif, положение как относительное, цвет как #bdbdbd, поле как 60px 25px, максимальная ширина как 285px, ширина как 100%, выравнивание текста как центр, размер шрифта как 16px, и размер окна как поле содержимого.
Стиль преобразования текста для заголовка и подзаголовка имени устанавливается в верхнем регистре для автоматического преобразования текста в верхний регистр. Название значка дано в стилях семейства шрифтов, таких как 'Lora', Arial, sans-serif, font-weight как 700, размер шрифта как 1.8em, высота строки как 50px, положение относительно, background-color как #bdbdbd, цвет как # 212121, выравнивание текста по центру, поле 0 0px 8px, граница сверху как 6px solid # 212121, и border-bottom в виде 6px solid # 212121. Размер шрифта для субтитров составляет 0,6em, а font-weight - 500.
HTML
Код <div class="suiskudam"> <h1>Скрипты</h1> <h5>Neque porro quisquam</h5> <h6>Est. 1958</h6> </div> <div class="suiskudam"> <h1>Шаблоны</h1> <h5>Cras ornare tristique elit</h5> <h6>Est. 1965</h6> </div> <div class="suiskudam"> <h1>Дизайн</h1> <h5>At vero eos et accusamus</h5> <h6>Est. 1977</h6> </div>
CSS
Код @import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Lora:700);
.suiskudam {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
color: #bdbdbd;
margin: 60px 25px;
max-width: 285px;
width: 100%;
text-align: center;
font-size: 16px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.suiskudam h1,
.suiskudam h5 {
margin: 0;
text-transform: uppercase;
}
.suiskudam h1 {
font-family: 'Lora', Arial, sans-serif;
font-weight: 700;
font-size: 1.8em;
line-height: 50px;
position: relative;
background-color: #bdbdbd;
color: #212121;
text-align: center;
margin: 0 30px 8px;
border-top: 6px solid #212121;
border-bottom: 6px solid #212121;
}
.suiskudam h1:before,
.suiskudam h1:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 5px;
border-width: 25px 10px;
border-style: solid;
}
.suiskudam h1:before {
left: -23px;
border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.suiskudam h1:after {
right: -23px;
border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.suiskudam h5 {
font-weight: 500;
font-size: 0.6em;
}
.suiskudam h6 {
margin: 0;
display: inline-block;
position: relative;
}
.suiskudam h6:before,
.suiskudam h6:after {
position: absolute;
height: 1px;
content: '';
background: #bdbdbd;
width: 30px;
top: 50%;
}
.suiskudam h6:before {
left: -35px;
}
.suiskudam h6:after {
right: -35px;
}
.suiskudam:before {
content: '';
position: absolute;
width: 180px;
height: 180px;
border: 8px solid #bdbdbd;
left: 50%;
top: 50%;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
border-radius: 50%;
}
JS
Код $(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 12 Ноября 2019, 20:32 | Сообщение 2 |
|
| Это шаблон ретро логотипа на основе CSS, разработанный с использованием CSS и HTML. Шрифты импортируются в форму с их URL. Стили для класса задаются как семейство шрифтов: 'Raleway', Arial, sans-serif, положение: относительное, отображение: inline-block, цвет: #bdbdbd, поле: 60px 20px, максимальная ширина: 285px, ширина: 100%, выравнивание текста: по центру, размер шрифта: 16 пикселей и размер блока: поле содержимого.
Стиль преобразования текста для всего текста устанавливается в верхнем регистре для автоматического преобразования текста в верхний регистр. В заголовке один даны стили font-family: 'Teko', Arial, sans-serif, font-weight: 700, font-size: 54px, text-align: center и line-height: 27px, тогда как заголовок два задан стили background-color: #bdbdbd, цвет: # 212121, отображение: встроенный блок, размер шрифта: 0,6em, font-weight: 700, высота строки: 18px, отступы: 0 20px и положение: относительное.
HTML
Код <div class="kegodes-gned-using"> <h1>American</h1> <h6>Restaurant</h6><br/> <h5>Est. 1977</h5><br/><i class="ion-star"></i> </div> <div class="kegodes-gned-using"> <h1>Nightbridge</h1> <h6>High School</h6><br/> <h5>Est. 1977</h5><br/><i class="ion-star"></i> </div> <div class="kegodes-gned-using"> <h1>Junction</h1> <h6>Riverside</h6><br/> <h5>Est. 1977</h5><br/><i class="ion-star"></i> </div>
CSS
Код .kegodes-gned-using {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
display: inline-block;
color: #bdbdbd;
margin: 60px 20px;
max-width: 285px;
width: 100%;
text-align: center;
font-size: 16px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.kegodes-gned-using h1,
.kegodes-gned-using h5 {
margin: 0;
text-transform: uppercase;
}
.kegodes-gned-using h1 {
font-family: 'Teko', Arial, sans-serif;
font-weight: 700;
font-size: 54px;
padding: 0;
text-align: center;
margin: 0;
line-height: 27px;
}
.kegodes-gned-using h5 {
background-color: #bdbdbd;
color: #212121;
display: inline-block;
font-size: 0.6em;
font-weight: 700;
line-height: 18px;
padding: 0 20px;
position: relative;
}
.kegodes-gned-using h5:before,
.kegodes-gned-using h5:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 2px;
border-width: 9px 5px;
border-style: solid;
opacity: 0.8;
}
.kegodes-gned-using h5:before {
right: 100%;
border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.kegodes-gned-using h5:after {
left: 100%;
border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.kegodes-gned-using h6 {
margin: 0;
display: inline-block;
position: relative;
text-transform: uppercase;
}
.kegodes-gned-using h6:before,
.kegodes-gned-using h6:after {
position: absolute;
height: 2px;
content: '';
width: 30px;
top: 50%;
border-top: 2px solid #bdbdbd;
border-bottom: 2px solid #bdbdbd;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kegodes-gned-using h6:before {
left: -35px;
}
.kegodes-gned-using h6:after {
right: -35px;
}
.kegodes-gned-using i {
font-size: 22px;
line-height: 36px;
}
JS
Код $(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
Демонстрация
| | Страна: (RU) |
| |
