- 1. Вертикальне вирівнювання чого завгодно
- 2. Розтягнути елемент на всю висоту вікна. Елемент на 100% висоти вікна.
- 3. Різне оформлення для різних посилань - на файли, пошту, або різні типи файлів
- 4. Зробити зображення чорно-білими
- 5. Метод найшвидшого фон і його анімація
- 6. Автоматична ширина колонок в таблиці за допомогою CSS
- 7. Box Shadow тільки з однієї або двох сторін
- 8. Обгортка для блоку з довгим текстовим контентом
- 9. Зробити «розмитий» текст
- 10. Анімація для трьох крапок, використовуючи тільки CSS анімацію
Наша взаимовыгодная связь https://banwar.org/
CSS це мова таблиці стилів, кажучи простіше з його допомогою ми оформляємо сайти, задаємо елементам розташування на сторінці, і визначаємо їх зовнішній вигляд. Незважаючи на те що мова CSS простий і його легко вивчити, іноді з ним не легко впоратися. У цьому немає нічого страшного, ви завжди можете знайти обходниек рішення в мережі, і в цій статті я хочу запропонувати вам 10 перевірених рішень які ви зможете використовувати в CSS при оформленні сайтів.
Якщо вам потрібно обернути довгий текст, автоматично вирівняти ширину колонок таблиці, або показати індикатор завантаження без використання гифок, то читайте цей пост повністю, у мене є рішення які можуть зробити не тільки це але і набагато більше.
1. Вертикальне вирівнювання чого завгодно
Якщо ви працюєте з CSS, то не раз задавалися питанням як вирівняти текст або будь-який інший елемент вертикально всередині блоку контейнера? Тепер, з використанням CSS3 трансформацій, можна вирішити цю задачу дуже елегантно.
.verticalcenter {position: relative; top: 50%; -webkit-transform: translateY (-50%); -o-transform: translateY (-50%); transform: translateY (-50%); }
Використовуючи цю техніку, вертикально вирівняти можна все, одну лінію тексту, кілька абзаців або блок з контентом. Це рішення працює і підтримується в різних браузерах. CSS3 Трансформації працюють в Chrome4, Opera 10, Safari 3, Firefox 3, і Internet Explorer 9.
2. Розтягнути елемент на всю висоту вікна. Елемент на 100% висоти вікна.
У деяких випадках, вам може знадобиться розтягнути елемент по вертикалі на всю висоту вікна. Звичайне зміна розміру елемента - дасть йому максимум висоту контейнера в якому він знаходиться. Щоб задати блоку висоту в 100% від всього вікна, необхідно переконається що висота найперших контейнерів html і body дорівнює 100%, тобто висоті вікна.
html, body {height: 100%; }
Тепер застосовуємо 100% висоту до потрібного нам блоку, ось так:
div {height: 100%; }
3. Різне оформлення для різних посилань - на файли, пошту, або різні типи файлів
Іноді у вас є кілька посилань, які ви хочете оформити несхожими на інші посилання. Щоб виізуально було ліку їх розрізняти, яка посилання веде на зовнішній сайт, яка відкриє email для відправки листа, а яка використовується для скачування файлів. Цей сниппет додасть іконку перед текстом посилання, і іконка буде різна, в завсімості від того н що посилається посилання (на сайт, пошту або файл).
a [href ^ = "http: //"] {padding-right: 20px; background: url (external.gif) no-repeat center right; } / * Emails * / a [href ^ = "mailto:"] {padding-right: 20px; background: url (email.png) no-repeat center right; } / * Pdfs * / a [href $ = ". Pdf"] {padding-right: 20px; background: url (pdf.png) no-repeat center right; }
Ось як це буде виглядати:
See the Pen Links Icons - different styles for links by Yurij ( @rightblog ) on CodePen .18493
4. Зробити зображення чорно-білими
Знебарвлення зображень в чорно-білі кольори може допомогти зробити ваш сайт більш стильним і матеріалістичним. Це можна зробити застосувавши чорно-білий фільтр використовуючи SVG. Ось що ми зробимо щоб застосувати чорно-білий тон:
<Svg xmlns = "http://www.w3.org/2000/svg"> <filter id = "grayscale"> <feColorMatrix type = "matrix" values = "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 "/> </ filter> </ svg>
Щоб зробити це рішення крос-браузерні, додамо CSS властивість filter:
img {filter: url (filters.svg # grayscale); / * Firefox 3.5+ * / filter: gray; / * IE6-9 * / -webkit-filter: grayscale (1); / * Google Chrome, Safari 6 + & Opera 15+ * /}
5. Метод найшвидшого фон і його анімація
Одна з найбільш привабливих можливостей в CSS це можливість анімації. Можна анімувати колір фону, прозорість, розмір, але не градієнтну заливку. Незважаючи що безпосередньо не поулучітся задати анімацію градієнту, вам може допомогти цей сниппет. Він рухає позицію фону, таким чином що жто буде виглядати як анімація.
button {background-image: linear-gradient (# 5187c4, # 1c2f45); background-size: auto 200%; background-position 0 100%; transition: background-position 0.5s; } Button: hover {background-position: 0 0; }
See the Pen Gradient background Animation by Yurij ( @rightblog ) on CodePen .18493
6. Автоматична ширина колонок в таблиці за допомогою CSS
Таблиці це головний біль, особливо коли це стосується ширини колонок. Однак, є рішення яке нам допоможе. Додавши white-space: nowrap для кожної td осередки ми легко поправимо то як таблиця обертає текст всередині.
td {white-space: nowrap; }
Подивіться демо і порівняйте результат.
See the Pen CSS Table Column Autowidth by Yurij ( @rightblog ) on CodePen .18493
7. Box Shadow тільки з однієї або двох сторін
Якщо потрібно реалізувати тінь тільки з одного боку, спробуйте ісполльзовать цей код. Щоб реалізувати таке рішення, спершу потрібно визначити контейнер з потрібною шириною і висотою. Дати йому тінь використовуючи псевдо-елемент: after і трохи пограти з ним щоб дати йому вірне розташування. Приклад коду нижче допоможе зробити тільки нижню тінь.
.box-shadow {background-color: # FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .Box-shadow: after {content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px # 000000; -moz-box-shadow: 0px 0px 8px 2px # 000000; box-shadow: 0px 0px 8px 2px # 000000; }
See the Pen Box Shadow on One Side by Yurij ( @rightblog ) on CodePen .18493
8. Обгортка для блоку з довгим текстовим контентом
Щоб зрозуміти, навіщо це потрібно краще срау подивитися на приклад. Припустимо у нс є кнтейнер, шириною в 200px. І в ньому крім звичайних слів є довга посилання на сайт. Напевно ви знаєте що довгі слова або в даному випадку посилання - не братимуть розбиватися на переноси. Таким чином контент вилізе за межі блоку.
Виправити цей баг нам допоможе простий CSS сниппет, який піджене текст під розміри контейнера.
pre {white-space: pre-line; word-wrap: break-word; }
Ось як тепер буде виглядати даний текст в контейнері:
9. Зробити «розмитий» текст
Хотіете додати ефект розмиття до тексту? Це можна досягти зробивши текст прозорим, і додавши до нього CSS властивість text-shadow ось так:
.blurry-text {color: transparent; text-shadow: 0 0 5px rgba (0,0,0,0.5); }
«Розмитий» текст готовий!
See the Pen Blurry Text by Yurij Rightblog.ru ( @rightblog ) on CodePen .18493
10. Анімація для трьох крапок, використовуючи тільки CSS анімацію
Цей приклад допоможе зробити анімацію з трьома крапками, часто використовується коли треба відобразити стан завантаження або очікування. Тепер ви зможете зробити це на CSS, не використовуючи гіф ізобраденія.
.loading: after {overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\ 2026"; / * Ascii code for the ellipsis character * /} @keyframes ellipsis {from {width: 2px; } To {width: 15px; }}
Давайте подивимося демо:
See the Pen Animating Ellipsis Using CSS by Yurij Rightblog.ru ( @rightblog ) on CodePen .18493
Спробуйте ці прийоми в дії, вони обов'язково стануть в нагоді в верстці нових проектів.
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
