| Kosten | Понедельник, 25 Июня 2018, 19:01 | Сообщение 1 |
| Всегда хотелось сделать оригинальное изменение логотипа или заголовков на сайте, что теперь при помощи стилистике CSS3, что сможете это сделать. Так как есть возможность встроить оригинальные эффекты, которые будут отличным приложением для любого тематического сайта. Общий элемент на веб сайтах является заголовок и безусловно изображения, что всегда можно обнаружить на главной страницы. Под этим я подразумеваю использование большого изображения или логотипа в верхней части каждой страницы.
Это обеспечивает визуальную идентичность и может быть безупречным от других. Однако, логичный способ сделать это, просто добавив изображение в верхнюю часть страницы. С помощью некоторого умного CSS вы можете получить заголовок, который имеет правильные текстовые элемент, где все еще отображается так, как если бы это было изображение внутри браузеров, и вы можете сделать это под заголовок или логотип ссылкой на домашнюю страницу.
Теперь все выстроим на чистые стили, где выставим изначальный код с одном классом, и через него выставим основной дизайн.
1. Первый вариант логотипа:
HTML
Код <a href="Ссылка" class="comisionedazun"> <div><b>ТЕСТ</b> логотипа</div> <span>Ключевые слова сайта</span> </a>
CSS
Код .comisionedazun,
.comisionedazun:hover,
.comisionedazun div {
position:relative;
display:inline-block;
font-size:36px;
color:#337AB7;
text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
font-family: 'Russo One', sans-serif;
font-weight: 300;
text-decoration:none;
margin:20px 0 20px 26px;
line-height:16px;
}
.comisionedazun div {
display:block;
}
.comisionedazun b {
letter-spacing:1px;
font-size:44px;
color:#1C84D0;
-webkit-text-stroke: 1px #BDE1FF;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-weight: 600;
background: #FFF;
}
.comisionedazun span {
text-shadow: 1px 2px 1px rgba(0,0,0,0.2);
display:block;
float:right;
font-size:20px;
color:#579EE6;
line-height:6px;
}
.comisionedazun:before {
position:absolute;
top:-12px;
left:0;
content: "";
border:8px solid #BDE1FF;
width:66px;
height:66px;
border-radius:100%;
transition: all 0.3s ease;
z-index:-1;
box-sizing: content-box;
}
.comisionedazun:hover:before {
transform: scale(1.1);
border:8px solid #1C84D0;
}
@media (max-width:600px) {
.comisionedazun,
.comisionedazun:hover,
.comisionedazun div {
font-size:26px;
line-height:6px;
margin:20px 0 20px 20px;
}
.comisionedazun b {
font-size:34px;
}
.comisionedazun span {
font-size:16px;
line-height:4px;
}
.comisionedazun:before {
top:-9px;
border:6px solid #BDE1FF;
width:52px;
height:52px;
}
.comisionedazun:hover:before {
border:6px solid #1C84D0;
}
}
На этом вся установка.
Демонстрация
2. Второй вариант логотипа:
HTML
Код <a href="/"
class="gadevelopment">ZORNETкомпания
<span>Скрипты для сайта</span>
</a>
CSS
Код .gadevelopment,
.gadevelopment:hover {
text-align:center;
letter-spacing:1px;
display:inline-block;
color: #fff;
font-size: 50px;
line-height:50px;
font-weight: bold;
font-family: 'Russo One', sans-serif;
text-decoration:none;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
.gadevelopment span {
display:block;
font-size: 24px;
transition: all 0.3s ease;
letter-spacing:2px;
line-height:32px;
}
.gadevelopment:hover span {
font-size: 26px;
}
@media (max-width:600px) {
.gadevelopment,
.gadevelopment:hover {
font-size: 36px;
line-height:40px;
}
.gadevelopment span {
font-size:18px;
letter-spacing:2px;
line-height:26px;
}
.gadevelopment:hover span {
font-size: 20px;
}
}
Формат идет в 3D, что всегда оригинально смотрится.
Демонстрация
3. Третий вариант логотипа:
Здесь вид, который по умолчанию идет.
Это эффект при наведение, что быстро срабатывает, а вот в стилях можно как замежлить или цвеличеть скороть исчезновение спашки, где идет в медленной анимаций.
Приступаем к установке:
HTML
Код <a href="/" class="consumer-themiven"> <b>ZORNET.RU</b>компания <div>Шаблоны для тематического сайта</div> </a>
CSS
Код .consumer-themiven, .consumer-themiven:hover {
display: inline-block;
font-size: 50px;
line-height :50px;
color: #FFF;
font-family: 'Roboto Condensed', sans-serif;
text-decoration:none;
}
.consumer-themiven b {
color: #BDE1FF;
font-size: 56px;
}
.consumer-themiven div {
font-size: 24px;
line-height:20px;
text-align:left;
color: #FFF;
}
.consumer-themiven:hover {
animation: blur1 1s ease-out;
}
.consumer-themiven:hover b {
animation: blur2 1s ease-out;
}
@keyframes blur1 {
from {
text-shadow:0px 0px 10px #e8e8e8,
0px 0px 10px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 25px #e8e8e8,
0px 0px 50px #e8e8e8,
0px 0px 50px #e8e8e8;
}
}
@keyframes blur2 {
from {
color: #337AB7 ;
}
}
@media (max-width:600px) {
.consumer-themiven, .consumer-themiven:hover {
font-size: 40px;
line-height: 40px;
}
.consumer-themiven b {
font-size: 48px;
}
.consumer-themiven div {
font-size: 18px;
}
}
Сама спышка по времени редактируется. что мжнно сделать. где будет долго или быстро появлятся
Демонстрация
| | Страна: (RU) |
| |
