Кожен веб-дизайнер хоче створювати тільки веб-сайти, що стоять, які оцінять всі користувачі інтернету.
Звичайно, неможливо задовольнити усі смаки. Ще як веб-дизайнер ви повинні просто спробувати зробити все можливе, щоб створити сайт, який сподобається відвідувачам! На щастя, вже доступні найпотужніші інструменти та ресурси, щоб створювати чудові веб-сайти і ми зібрали для вас деякі корисні фрагменти CSS, які допоможуть зробити цікаву фішку у ваших проектах!
Це 15 дивовижних текстових ефектів за допомогою CSS3– всі підібрані, і ми думаємо, що вони допоможуть додати блиск оригінальності у ваших проектах. Деякі з них корисні для певних цілей, інші підходять для багаторазового використання.
Якщо ви любите квіти і ви хочете чудовий і повний колір тексту ефект, то ця пропозиція ідеальне рішення для вас! Це дуже підходить для відображення імені креативного агентства або портфеля проектів. Звичайно, він може бути використаний для будь-якого іншого типу проектів – якщо ви хочете виділитись, то цей текстовий ефект-відмінний вибір!
Хвильовий ефект справді приголомшливий! Це може бути використане, щоб додати трохи таємничості. Було б цікаво використовувати його для того, щоб підкреслити знижку або спеціальну пропозицію, яка працює лише протягом дуже короткого періоду часу. Що ви думаєте?
Це дуже цікавий текстовий ефект; я думаю, що з-за колірної схеми використовується він може бути застосований, щоб підкреслити vintage дизайн. Це розумне використання тіней тексту і має потенціал, щоб привернути увагу користувачів. Не забувайте, що Вінтаж ніколи не помре!
Наступний текстовий ефект працює як магніт для глядачів. Ви можете використовувати це, щоб поліпшити форму, щоб підкреслити новий продукт, який пропонується для продажу або просто для залучення очей глядачів. Це привабливі і мудрий веб-дизайнер буде використовувати його на його перевагу!
Я думаю, що тенденція серед веб-дизайнерів є створення більш динамічної онлайн присутності. Прохолодний ковзний ефекти та переходи сторінок найчастіше використовуються можливості додавання більшого динамізму сайт. Все ж таки, якщо ви хочете ще більше динамізму, цей дивовижний текст за допомогою CSS3 ефект може бути хорошим варіантом. Я думаю, що це просте, але ефективне рішення!
Найвибагливіші клієнти є дітьми, але це не повинно змусити вас відмовитися від створення сайтів для них. Якщо ви працюєте на малюка, пов'язаних з проектом або смішний один, то ви можете використати цей ефект для тексту! У Jokerman шрифт має свою особливу красу, чи не так?
CSS3 та 3D-моделювання мають загального більше, ніж лише цифра “3”! За допомогою CSS3 дозволяє створювати красиві 3D ефекти як один із цього фрагмента.Цей ефект підійде для великої пул проектів і я думаю, що ви повинні дати йому спробувати!
Іноді граючи з вогнем може бути весело! Не хвилюйся, я не піроман, я просто вражена цим прикольним текстовим ефектом! Я не пам'ятаю, щоб бачив цей текстовий ефект у макеті інших сайтів, так ось ще один привід використати його та створити оригінальний сайт!
У ситуації, яку Ви цінуєте більше за дискретний текстовий ефект, цей “туманний ефект” - це моя рекомендація. Це правда, що може негативно вплинути на юзабіліті вашого сайту. З іншого боку, якщо Ви не ризикуєте, Ви не виграєте! Звичайно, це може бути перероблено, щоб відповідати Вашим вимогам!
Хоча цей текстовий ефект досить складний, вона реалізується за допомогою CSS, немає ніякого JavaScript. Особисто я вважаю, що він може бути використаний для музичних сайтах або виділити певний елемент із веб-сайту.
Це дуже дискретний ефект, але я думаю, що він може додати "Вау" ефект у макети. Металеві виглядають чудово створені та з'являючі/зниклі моменти акцентувати.
Я може бути суб'єктивна, тому що я великий фанат "Зоряні війни" фільм, але цей текстовий ефект дійсно класний. Це робить ваші проекти цікавішими і, безсумнівно, шанувальники цього фільму закохалася у ваш сайт через цей ефект.
Цей текстовий ефект суттєво сприяє підвищенню взаємодії користувача-сайту. Це показує ще раз, що CSS3 має великий потенціал і талановитий веб-дизайнер зможе створити красиві анімації за допомогою всього декількох рядків коду.
Це останній пункт цього списку, але Ви не повинні ігнорувати його. Набагато більше, Вишенька на торті, річ у тому, що немає більш ніж 10 CSS3 дивовижні текстові ефекти. Я думаю, що ви повинні ретельно перевіряти їх усі і вивчити, як ці залучення ефекти були реалізовані.
Ті, хто все ще думають, що атрибути CSS не достатньо, щоб створити цікаві текстові ефекти повинні дати прислухатися до цього! Вона поєднує кілька ефектів - анімація, 3D-перспективи, тіней і текстові налаштування. Я думаю, що тіні та обведення поєднання-це старомодно, але цей проект створений з метою показати, чого можна досягти за допомогою "чистого CSS".
У вас раніше з'являлося неприємне почуття, коли ваші підписи погано виглядали як кольори кнопок, панелей, або просто текст слабко контрастував з фоном сторінки? За допомогою CSS тініцю проблему легко вирішити, використовуючи властивість text-shadow, щоб покращити читабельність та контрастність тексту.
У наведених прикладах ми використовуємо тіні тексту в різних ситуаціях, що дасть вам необхідну базу, щоб далі ви змогли самостійно вивчити це питання.
1. Базове налаштування
Створіть новий HTML-файлі додайте до нього наступний код HTMLі CSS:
У розділ HTML додайте тег
із класом text:
Web Code Geeks
Для цього елемента ми додаватимемо тінь тексту CSS. Я поставив для цього елемента початкові властивості, щоб він гарно виглядав на екрані:
Тепер давайте задамо для тексту атрибут text-shadow. Але спочатку розберемося, які значення набуває цей атрибут:
Text-shadow: 4px 4px 4px #ccc;
- 4px - зміщення по осі X ( горизонтальне);
- 3px - зміщення по осі Y ( вертикальне);
- 2px – значення розмиття;
- #ccc – колір.
Це задається так:
Text-shadow: horizontal-offset vertical-offset blur color;
де колір може бути представлений шістнадцятковим кодом #ccc або RGBA (0,0,0,0.3); . У CSS ми можемо застосувати до нашого тексту внутрішню тінь CSS так:
.text (
font-size: 5em; /* робимо текст більше */
text-shadow: 4px 3px 2px #ccc;
}
Подання в браузері цього тексту з тінню виглядатиме так:
ПРИКЛАД сайт
Далі ми по-різному змінювати колір фону елемента body. Робимо ми це тому, що для деяких тіней CSS потрібне певне тло, інакше вони не будуть помітні. Щоб текст виглядав красивішим, ми задамо його у верхньому регістрі.
2. Ефект відбитка
Встановіть для кольору тексту трохи темніший відтінок, ніж фон. Потім застосуйте невелику білу тінь тексту із зменшеною непрозорістю:
Body (
background: #222;
}
.text (
font-size: 5em;
color: rgba(0,0,0,0.6); /* колір тексту */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* додавання тіні */
}
Використовуючи код RGBA, можна встановити непрозорість кольору. Зверніть увагу, що колір тексту має непрозорість 60% (0.6) , а тіні div CSS 10% (0.1) .
ПРИКЛАД сайт
3. Ефект ретро-тіні
Для ретро-тіні не завжди потрібно застосовувати розмиття. Візьмемо, наприклад, цю ретро-тінь:
Body (
}
.text (
font-size: 5em;
color: white; /* змінюємо колір тексту на білий */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* додавання ретро-тіні */
}
ПРИКЛАД сайт
4. Ефект подвійної тіні
Цікаво, що ви можете додавати більше однієї CSS тіні шрифту. Це можна зробити так: text-shadow: shadow1, shadow2, shadow3; Давайте додамо дві тіні, одна - з кольором фону, а друга трохи темніша:
Text (
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* дає дві тіні */
}
Фон у нас білий, тому інший колір для нього нам не потрібен. У браузері ефект виглядатиме так:
ПРИКЛАД сайт
5. Ефект віддаленої тіні
Цей ефект ґрунтується на функції визначення кількох красивих тіней CSS. Нижче ви можете побачити ефект із чотирма тінями, що відкидаються вниз з різним ступенем інтенсивності:
Body (
background: #fff3cd; /* змінюємо колір фону */
}
.text (
font-size: 5em;
color: white;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}
ПРИКЛАД сайт
6. 3D-ефект Марка Дотто
Body (
background: #3495c0; /* змінюємо колір фону */
}
.text (
font-size: 5em;
color: white;
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);
}
Тепер подивіться, як ці внутрішні тіні тексту CSS виглядають у браузері:
ПРИКЛАД сайт
7. Реалістичний ефект вирізаного тексту Гордона Холла
Гордон використовує деяку просунуту магію CSS, щоб задати не лише зовнішню тінь, а й реалістичну внутрішню тінь:
Body (
background: #cbcbcb; /* змінюємо колір фону */
}
.text (
font-size: 5em;
color: transparent;
background-color: #666666;
-webkit-background-clip: текст;
-moz-background-clip: текст;
background-clip: текст;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
І це створює ефект вирізаного тексту.
ПРИКЛАД сайт
8. Ефект світіння тексту
body (background: #992d23; /* змінюємо колір фону */
}
.text (
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}
Ця тінь створює ефект світіння тексту:
ПРИКЛАД сайт
9. Ефект опуклого тексту
body (background: #629552; /* змінюємо колір фону */
}
.text (
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
ПРИКЛАД сайт
10. Ефект довгих тіней
Цей ефект можна зробити за допомогою
Background-color: rgb (147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px 5 rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 6 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13p 13p (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 17 17 ), 19px 19px rgb(131, 179, 60), 20px 2p 2 3 2 3 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 17 17 6 ;
color: #eaeaea;
ПРИКЛАД сайт
Висновок
Як бачите, властивість text-shadow дуже проста у використанні, і за його допомогою ви можете створювати власні креативні CSS тіні.
У цьому уроці ми покажемо шість дивовижних текстових ефектів CSS3: ефект тривимірності, створений за допомогою тіні тексту, ефекти з градієнтами та масками зображень, ефекти з переходами та властивістю background-clip та інші ефекти. Всі вони можуть стати в нагоді, тому що за допомогою CSS3 можна досягти по-справжньому вражаючих результатів. Частина вищеописаних ефектів працює в більшості браузерів, що підтримують CSS3, але кілька прикладів працює тільки на движку Webkit. Отже, щоб отримати максимальне враження, подивіться демонстрацію в браузерах, що підтримують двигун Webkit, таких як Chrome, Safari і Opera.
Для початку давайте додамо загальні стилі для всіх подальших експериментів:
#main div ( font-size : 120px ; font-weight:bold ; position : relative ; )
Тут ми задали розмір шрифту та його товщину. Тепер почнемо.
Ефект №1 - Тривимірний текст за допомогою тіні CSS3
Складно уявити всі можливості, які надає традиційну властивість тіні тексту. У CSS3 властивість тіні тексту застосовує тінь до тексту. Можна встановити горизонтальний розмір тіні, вертикальний розмір тіні, відстань розмиття і колір тіні:
Text-shadow: h-shadow v-shadow blur color; /* Приклад: */ text-shadow : 2px 2px 5px #FF7777 ;
Щоб додати більше глибини тексту, потрібно просто додати кілька тіней, наприклад:
#eff1 ( color : #00b506 ; text-shadow : 0px 0px 0 rgb (-28 ,153 ,-22 ) , 1px 1px 0 rgb (-55 ,126 ,-49 ) , 2px 2px 8 -77 ) , 3px 3px 0 rgb (-111 ,70 ,-105 ) , 4px 4px 0 rgb (-139 ,42 ,-133 ) , 5px 5px 0 rgb (-166 ,1 6 (-194,-13,-188), 7px 7px 0 rgb (-222,-41,-216), 8px 8px 7px rgba(0,0,0,0,0). 75 ), 8px 8px 1px rgba(0,0,0,0. 5 ), 0px 0px 7px rgba(0,0,0,. 2 ) ; }
Ефект №2 - градієнт тексту CSS3 за допомогою -webkit-mask-image для движка Webkit
Цей ефект використовує маски CSS3, властивість -webkit-mask-image. Поки що ця властивість не підтримується іншими браузерами, але сподіваємося, вона підтримуватиметься в майбутньому:
#eff2 (color: #00b506; text-shadow: 1px 1px 1px # 000000 ; -webkit-mask-image: -webkit-gradient(linear, left top , left bottom , from(rgba(0 ,0 ,0 ,1 ) ) , color-stop( 50 % , rgba(0,0,0,. 3 ) ) , to(rgba(0 ,0 ,0 ,1 ) ) ) ; )
Ефект №3 - райдужний фон тексту CSS3 за допомогою webkit-text-fill-color для движка Webkit
Щоб досягти такого ефекту, використовуємо властивість background-clip з нестандартним значенням text, яке підтримується лише браузерами на движку Webkit:
#eff3 ( background-image : -webkit-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; background-image : -moz-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) background-image : -ms-linear-gradient(left , #ff0000 , #ff7f00 , #ff0 , #0000ff , #8b00ff ;; background-image : -o-linear-gradient(left , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ); (to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff); -webkit-text-fill-color: transparent; -webkit-background-clip: text;
Ефект №4 - Сяючий текст за допомогою переходів CSS3 та -webkit-background-clip для движка Webkit
У браузері на движку Webkit смуга світла часом пробігає текстом. Для досягнення цього ефекту використана та сама властивість background-clip з нестандартним значенням text:
#eff4 (background : #00b506 -webkit-gradient(linear, left top , right top , from(#00b506 ) , to(#00b506 ) , color-stop(0 ) 5 , #ffffff)) 0 0 no-repeat; color : rgba (255, 255, 255, 0). 1 ); font-size: 120px; font-weight: bold; position: relative; -webkit-animation: shine 2s infinite; -webkit-background-clip : текст; -webkit-background-size: 300px; ) @-webkit-keyframes shine ( 0 % ( background-position : top left ; ) 100 % (background-position : top right ; ) )
Ефект №5 - обведений текст CSS3 за допомогою властивості text-stroke для движка Webkit
Можна легко додати цікаве плоске обведення тексту за допомогою властивості -webkit-text-stroke:
#eff5 ( color : #00b506 ; -webkit-text-stroke: 1px # 000 ; }
Ефект №6 - тривимірний поворот тексту за допомогою трансформації повороту навколо осі Y CSS3
Можна повернути текст за допомогою переходів та трансформації повороту навколо осі Y:
#eff6 ( color : #00b506 ; ) #eff6 p ( color : #8A2BE2 ; cursor : pointer ; display : inline-block ; -webkit-transition: .5s ; -moz-transition: .5s ; -o-transition: . 5s ; transition: .5s ; ) #eff6 p:hover ( -webkit-transform: rotateY(-180deg) ; -moz-transform: rotateY(-180deg) ; -0 -transform: rotateY(-180deg) ; transform: rotateY (-180deg) ; filter: progid:DXImageTransform .Microsoft .BasicImage (rotation=2 ) )
Висновок
В цьому уроці ми розглянули способи створення різних текстових ефектів за допомогою властивостей CSS3. Сподіваємося, Вам сподобався цей урок і він стане Вам у нагоді. Не всі властивості, які були використані для цього уроку, працюють у всіх браузерах, але вони використовуються тільки для створення красивих ефектів, що не впливають на функціональність, так що їх можна застосовувати, наприклад, за допомогою правила @ supports, тільки для браузерів, що підтримують ці властивості.
Переклад — Черевичка
Друкарня є найулюбленішою іграшкою веб дизайнерів. CSS має у своєму складі один дуже цікавий інструмент - text-shadow(Тінь тексту), який на перший погляд здається досить простим, але з його допомогою можна створити ефекти, що запам'ятовуються, якщо підключити винахідливість і уяву.
Основи використання тіней
Властивість text-shadowдуже просто використовувати. Воно підтримується усіма сучасними браузерами та навіть без використання префіксів. Але підтримка в IE (навіть IE9) відсутня. Можна використовувати інструменти, наприклад Modernizr, які допоможуть витягнути ефекти CSS3 навіть у старих версіях IE.
Синтаксис
Для створення тіні тексту використовується синтаксис властивості text-shadow, що наводиться нижче. Потрібно визначити чотири параметри: перші два задають положення тіні, третій встановлює рівень розмиття, а четвертий визначає колір тіні.
Text-shadow: зміщення_по_горизонталі зміщення_по_ вертикалі розмиття колір;
Нижче наводиться приклад тіні тексту, яка зміщена на два пікселі вниз і чотири пікселі вправо, розмита на три пікселя і має чорний колір з рівнем непрозорості 30%.
Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат використання цієї властивості буде виглядати так:
Чому використовується rgba?
Вам не обов'язково використовувати rgba для визначення кольору тіні при визначенні якості. Однак rgba додає ще одну розмірність при визначенні тіні - рівень прозорості.
Цей метод значно простіше, ніж інші способи визначення кольору. Вам не треба акцентувати увагу на визначенні відтінку кольору тіні, який може бути лише трохи темнішим або світлішим за колір фону. З rgba можна просто використовувати білий або чорний кольори і збільшити їх прозорість, щоб досягти потрібного відтінку фону при змішуванні фарб.
За допомогою властивості text-shadowможна створювати різні ефекти для тексту, не обмежуючись простими тінями, що падають. Наприклад, тут наводиться код формування ілюзії вдавленого тексту.
Спочатку потрібно встановити колір тексту трохи темнішим, ніж колір фону. А потім треба використовувати властивість text-shadowз білим кольором та збільшеною прозорістю.
Колір тла #222, а колір тексту має рівень непрозорості 60%. Біла тінь позиціонується трохи вниз і праворуч із рівнем непрозорості 10%.
Body ( background: #222; ) #text h1 ( color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )
Зовсім необов'язково розмивати тінь. Чітка тінь може чудово поєднуватися з дизайном сайту.
Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Справжня веселість починається, коли ви відкинете геть обмеження наявності лише однієї тіні. Використовуючи кому для розділення визначень, ви можете використовувати стільки тіней, скільки потрібно!
Text-shadow: shadow1, shadow2, shadow3;
Ось приклад використання двох тіней. Перша має той самий колір, що й фон.
Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Зміщення вниз на велику відстань
Як тільки ви освоїте використання кількох тіней, результат буде все більш виразним. Дуже просто створити 3D-ефект для тексту.
У прикладі використовується чотири тіні, всі зміщені вниз різні дистанції і розмиті.
Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 0 );
Зміщення вниз на невелику відстань та сильне розмиття
Ось інше втілення тієї самої ідеї. Три тіні зміщені на меншу відстань та сильніше розмиті.
Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
3D текст від Mark Dotto
Ефект використовується на сайті MarkDotto.com. У ньому використовується 12 різних тіней для створення чудового 3D ефекту.
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,. 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);
Вдавлений текст від Gordon Hall
Notice in the example above Я назвав мою технологію “quick and dirty” letterpress effect. That's because there's a much more involved way to create some seriously inset text that's much more believable.
Gordon використовує деякі серйозні CSS voodoo, щоб розблокувати не тільки тільки штрих, але genuine inner гачок як добре. Видалити його blog post for full explanation of the technique.
Background-color: #666666; -webkit-background-clip: текст; -moz-background-clip: текст; background-clip: текст; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Свічення
Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Множинні джерела світла
Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Висновок
Як і більшість ефектів CSS, тіні дуже легко реалізувати. Але поєднання простих дій можуть призвести до вражаючих ефектів.
