Плавне підкреслення посилання при наведенні

Уявляю коротенький фрагмент коду(фрагментом) CSS, для реалізації плавного виділення анкорів посилань з підкресленням. Навіщо потрібно виділяти посилання загального місива тексту, це і їжаку зрозуміло.

Редагований, візуальний блок стилів CSS

Чи знаєте ви, що тег по суті своїй є блоковим елементом? Він так само, як і інші елементи може бути відображений на сторінці зі всім вмістом! Більш того, не відображено у вигляді звичного всім демо-коду, а в якості простого візуального редактора фактичних стилів CSS використовуються на сторінці. Виявляється все дуже просто, використовуючи атрибут HTML5 contenteditableв тезі , додамо йому можливість редагувати фактичні стилі на сторінці.

Організація мініатюр в галерею за допомогою CSS

Пропоную коротенький фрагмент коду CSS, за допомогою якого ви легко зможете вибудувати зображення мініатюр струнку сітку, звичний всім макет галереї.Для розміщення мініатюр, використовуємо простий ненумерованний список , який в залежності від розміру картинок, буде автоматом вибудовуватися в ідеально розкреслену сітку, з рівними відступами між кожною картинкою.HTML

Адаптивний футер сторінки приклеєний до низу вікна браузера

Невеликий фрагмент коду (фрагментом) css, з допомогою якого можна дуже просто і надійно «прибити», притиснути (приклеїти, sticky) футер сторінки до низу вікна браузера. Один з численних способів, поганий він чи хороший, можна дізнатися лише в порівнянні і при реальному використанні на діючих або тестових проектах. Подивіться на реалізацію даного виду приклеєного футера, протестуйте його роботу в різних браузерах на своїх тестових майданчиках. Спробуйте змінювати розміри вікна браузера, футер буде автоматом підлаштовуватися під вибраний вами розмір.CSS#content {

Сниппет для вкладок навігації на css3

Найпростіший спосіб створити ефективну панель вкладок без використання яких-небудь javascript і зображень. Найпростіше рішення з усіх, які я зустрічав. Нічого зайвого, мінімум коду і, компактний блок з перемикаються вкладками легко інтегрується в будь-макет сторінки. Експериментуючи з параметрами властивостей CSS, ви завжди зможете сформувати зовнішній вигляд вкладок, так щоб вони гармонійно вписувалися в загальний дизайн ваших проектів. Розписувати докладно весь розклад процесу розробки, не бачу особливої потреби, все і так більш-ніж очевидно, варто лише тільки раз поглянути на фрагмент коду, що виконується, і на живий приклад роботи цих вкладок. CSS Стилі.tabs {

Прості підказки на CSS3 і HTML5

Часто запитують, який найпростіший спосіб реалізації підказок до посилань. Найпростіший, це не особливо заморочуючись з приводу зовнішнього вигляду підказок, використовувати вбудовані засоби браузерів, прописуючи атрибут title= посилання. У той же час існує маса інших способів створення простих екранних підказок, про деякі з них я писав раніше, так і в «інтернетах» матеріалу по цій темі не мало.

Сниппет: Буквиця в тексті за допомогою CSS

Нещодавно довелося мені оформляти простеньку, представницьку сторінку для однієї районної бібліотеки. Замовник побажав бачити параграфи з використанням буквиці в заголовку кожного з них. Способи створення буквиці відомі дуже давно і добре відпрацьовані, так що з виконанням роботи ніяких труднощів не виникло.

Вертикальний текст — це просто!

Найпростіший спосіб розгорнути текст вертикально за допомогою CSS. Напевно, багато хто з вас зустрічали на сторінках сайтів таку фішку, як розгорнутий текст вертикально. Зрозуміло що банальний перенесення рядків з використанням тега , додаючи його після кожної букви, в даному випадку не спрацьовує.

Спливаюча підпис до зображення при наведенні з допомогою CSS3

Готових рішень створення динамічних підписів до картинок, що зявляються при наведенні курсору на тіло зображення, існує на сьогоднішній день достатньо. Одного разу ми вже розглядали один чудовий варіант, докладним чином.

CSS-стилі для форм зворотного звязку

Форма зворотнього звязку, або якщо по іншому, контактна форма, один з найбільш важливих елементів будь-якого сайту. І звичайно ж, як і всі інші елементи інтерфейсу, контактні форми, повинні бути, як-то зовні стилізовані і оформлені, щоб привернути увагу користувачів і розташувати до спілкування. Пропоную на ваше огляд парочку варіантів стилів форм зворотного звязку, виключно засобами CSS3, без використання додаткових зображень в оформленні.

CSS Медіа-запити для різних пристроїв

В якості шпаргалки, зібравши інформацію з різних джерел, склав ось такий, невеликий набір стандартних правил css медіа-запитів, для різних типів пристроїв і режимів їх орієнтації, залежно від положення телефону або планшета в руках користувача. Так в портретному режимі portrait, коли висота перевищує довжину, і в альбомному режимі landscape, коли ширина більше висоти, ну і звичайно ж, комбіновані варіанти використання цих режимів.Ось кілька поширених медіа-запитів, які можуть виявитися корисними при проектуванні динамічного сайту з адаптивним дизайном:/* Смартфони (портретний і альбомний режими) ----------- */

Фон в стилі «карбон» з допомогою градієнтів CSS

Всім, привіт! У попередній статті розписував, як за допомогою лінійних і радіальних градієнтів CSS, можна «намалювати» цілком симпатичні текстури для фону. На цей раз пропоную відтворити темний фон в стилі «карбон», який відмінно підійде для заливки, як основного фону сайту, так і для оформлення окремих блокових елементів.У прикладі використовував повторювані лінійні градієнти з кутом нахилу 45deg, а так само накладення радіального градієнта по центру вгорі at 50% 0, для імітації світлового відблиску: На весь екранВийшло фонове зображення масштабується і змінюємо розмір точок, за допомогою значень властивості background-size.

Настройка розмірів текстового поля з допомогою CSS

При додаванні текстового поля створеного через тег на окрему сторінку або запис, в сучасних браузерах за замовчуванням присутній ледве помітний куточок з допомогою якого мишею користувачам надається можливість змінити розміри поля вводу.

Абсолютно круглі зображення з допомогою CSS

Останнім часом у веб-дизайні стає дуже популярним використання круглих зображень. Приклад можна побачити у мене на блозі, мініатюри до записів виводяться максимально округлені, тобто абсолютно круглими.

Виділення зовнішніх посилань з допомогою CSS

При написанні статей ми так чи інакше ні-ні та використовуємо посилання на зовнішні сайти, це можуть бути посилання на першоджерела, різні веб-додатки, каталоги і т. д. Більшість з нас ніяк не виділяє зовнішні посилання, частіше обмежуючись атрибутом target=_blank в засланні, визначальним відкриття цієї самої посилання в новому вікні, ну, або ж стандартні підказки через атрибут title. Давайте розглянемо найпростіший приклад того, як з допомогою кількох рядків CSS, можна візуально виділити із загального масиву, всі посилання на зовнішні сайти. Стилізувати посилання, як ви знаєте, можна по різному, виділити кольором, підкресленням і т.

Поворот елементів під будь-яким градусом на CSS3

Найпростіше рішення для повороту блочних елементів сторінки під будь-яким градусом з допомогою CSS3. У прикладі я використав цей метод стосовно до заголовка першого рівня . Ви ж, запросто можете застосувати поворот до будь-якого іншого елементи блоків (div, blockquote, p, h2, h3, та ін). Для того щоб реалізувати поворот на практиці, достатньо в CSS створити окремий клас, наприклад .rotate (логічно), прописати в ньому чудова властивість transform з певним видом трансформації ( в нашому випадку це rotate) і задати необхідні значення повороту елемента на заданий кут відносно точки трансформації rotate(-8.5 deg);.Для коректного відображення цього методу в різних браузерах, використовуємо вендорные префікси -webkit-, -moz-, -ms - та -o-.

Набір стилів css для створення кнопок

Пару місяців тому робив простенький шаблон на замовлення, використовував окремі елементи фреймворків LumX і Materialize. Зокрема LumX виділив в окремий набір класи для створення динамічних кнопок. Відсік все непотрібне(виключно для мене), розбавив шрифт-іконками від Font Awesome і вийшов цілком собі автономний, невеликий набір стилів, за допомогою якого можна швидко інтегрувати на сторінки сайту, досить симпатичні кнопки.Довго і докладно розписувати всі складові не буду, все гранично ясно, досить поглянути на сирці.

Ефект печатающегося тексту за допомогою CSS3

Існує чимало рішень для реалізації ефекту печатающегося тексту за допомогою javascript. На jQuery наприклад, можна з текстом виписувати такі кренделі, що диву даєшся. Але мене завжди цікавить можливість виконання тієї чи іншої задачі з допомогою властивостей CSS3, звичайно тільки тоді, коли це виправдано і не несе явних втрат у загальній картині кінцевого результату. На одному з проектів, мені знадобилося (з легкої руки і з примхи замовника) виконати короткий опис сайту у вигляді печатающегося тексту зявляється під логотипом вчасно завантаження.

Фон у вигляді шахової дошки на чистому CSS3

Не так давно, я вже розповідав, як можна розлініяти фон в тетрадную клітку з допомогою кількох рядків коду CSS, без використання зображень, текстур(патернів). Сьогодні хочу продемонструвати найпростіший приклад заливки фону в більш крупну клітку, щось на зразок шахової дошки.

Фон у вигляді діагональної сітки на CSS

В продовження теми створення фонових текстур на чистому CSS, пропоную кілька фрагментів коду, за допомогою яких, ви легко зможете виконати візуальний ефект у вигляді діагональної сітки і застосовувати його, як до цілої сторінки, так і до окремих блоків.Як у випадку з шахівницею і фоном у вигляді зошитового клітинки, сітку з ромбовым плетінням, ми будемо малювати з допомогою повторюваного лінійного градієнта linear-gradient. Все що нам потрібно, це створити два повторюваних градієнта, розгорнутих на 45 -45 градусів відповідно, з допомогою background-size визначити розмір клітин, і вибрати світлий або темний колір основного фону background.1.

Навколишній світ

Час спорту

Космос