Великий Путь Вебмастера от идеи до интернет бизнеса

Блог Романа Чуешова

Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Подсветка текста css различными способами. Раскрываю секреты свойства text-shadow

Здравствуйте, гики веб-разработки и любители поэкспериментировать с чем-нибудь новеньким. Сегодня я расскажу, как создается подсветка текста css-средствами. Это достаточно интересная тема. При правильном использовании такой техники можно добиться эффектного заголовка сайта или симпатично оформленного текстового контента.

Данную публикацию я хочу посвятить не столько теоретическому материалу, сколько практическому, потому что для выполнения подсвеченного текста нужно знать очень узкий набор свойств. Так что давайте приступать к делу!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Анимация текста css стилями: первое знакомство со свойствами transition и animation, которые помогут оживить ваш текст

Доброго времени суток, читатели и подписчики моего обучающего блога. Сегодня я решил посвятить статью интересной тематике – анимациям. Почти на каждом веб-сервисе есть несколько анимированных объектов, которые оживляют дизайн страниц и придают им некой современности.

Поэтому после прочтения текущей публикации вы узнаете, как создается анимация текста css-инструментами даже без js или подключения скриптовой библиотеки jQuery. Не изменяя своим принципам, я также привел несколько интересных примеров. Приступим же!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Селекторы в css: что такое и для чего нужны. Стань продвинутым верстальщиком после прочтения статьи

Доброго времени суток, читатели текущей публикации. Сегодня я затрону важные темы, без знания которых практически невозможно верстать профессиональные и качественные сайты, а также разбирать чужой код. Это основы основ.

В данной статье я объясню, что такое селекторы в css и каких видов они бывают, также подробно расскажу, что такое классы, псевдоклассы и псевдоэлементы, кого называют родителем или предком, а кого потомком или дочерним элементом. Безусловно, на ключевые моменты теоретического материала я подготовил практические задания и привел готовые программные решения. Приступим же!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Адаптивный фон сайта css свойствами или как научиться создавать отзывчивые интернет ресурсы

Приветствую всех, кто жаждет узнать об адаптивной верстке сайтов. В данной публикации я хочу рассказать, как создать адаптивный фон сайта css-инструментами. На сегодняшний день из-за активного развития технологий адаптивность в моде.

Многие уважающие себя бизнесмены заказывают разработку кроссбраузерных веб-сервисов, т.е. таких сайтов, которые вне зависимости от размера девайса подстроят контент под ширину и высоту вкладки. Именно поэтому в статье я расскажу про медиазапросы и их предназначение, а также приведу контрольный пример. Ну что ж, начнем разбор полетов!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Очистка css стилей поможет вам правильно сверстать свои веб-странички

Приветствую всех читателей текущей статьи, а также подписчиков моего обучающего блога. Наверное, вы не раз сталкивались с проблемой, когда стилевая разметка выполнена идеально, но несмотря на это в разных браузерах страницы сайта несколько отличаются. Для того чтобы этого не было я расскажу вам, что такое очистка css стилей.

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

Читать полностью
Комментариев 0
Рубрика:Фишки css

Делаем градиент текста css стилями, а также переливающийся текст для акцентрирования внимания

Доброго времени суток всем, кто обожает узнавать необычные и новые возможности css. Эта публикация как раз для вас. И я вам гарантирую, она будет очень интересной и полезной. Сегодня я расскажу, как можно создать градиент текста css-средствами.

В этой статье я постарался собрать как можно больше интересных эффектов и способов оформления текстового контента. Поэтому после прочтения статьи ваш веб-ресурс может сильно преобразиться в лучшую сторону и выглядеть современнее. Все-все, приступаем к делу!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Как вставить css в html документ: множество способов на ваш выбор

Доброго времени суток, читатели данной публикации и мои дорогие подписчики. Сегодня я хочу рассказать вам о базовом механизме, без которого не обойдется ни одно веб-приложение. Мы разберем с вами как вставить css в html-код. Это основы основ, знать которые нужно обязательно.

Однако я должен также заметить, что материал сам по себе не сложный и должен быстро отложиться в памяти. В публикации я расскажу, какие существуют способы добавления стилевых таблиц в гипертекстовую разметку и как они могут взаимодействовать друг с другом. Ну что ж, приступим!

Читать полностью
Комментариев 0
Рубрика:Фишки css

Двойная рамка css стилями: учимся использовать свойства border и outline

Приветствую всех читателей текущей публикации. Сегодня я расскажу вам, как создается двойная рамка css-инструментами. Вы познакомитесь с такими свойствами, как border и outline, а также узнаете, какие функции они выполняют.

Прочитав данную статью, вы пополните свой арсенал знаний новыми интересными фишками создания теней вокруг границ и освоите технологию создания рамок, состоящих из разных цветов. К тому же я хочу затронуть тему, касающуюся псевдоэлементов, которые значительно расширяют возможности верстки на веб-языках html и css. Ну что ж, давайте приступим к делу!

Border и его возможности

Начну с известного свойства border. Оно часто используется в программном коде, и в моих предыдущих публикациях я косвенно затрагивал его не раз. Данное свойство является универсальным и очень гибким.

Помимо стандартного предназначения, border используют для подчеркивания заголовков или выделения важной текстовой информации среди всего контента как, например, отделение вертикальной линией  грамматических правил.

Конечно же каждый разработчик «играет» с существующими элементами веб-языков по своему усмотрению, поэтому вариантов использования может быть уйма.

border и outline

Border предусматривает возможность определения стиля, толщины и цвета границ как для всех сторон сразу, так и для конкретной области. Для этого нужно к слову border добавить название стороны с дефисом. К примеру, border- bottom.

Стиль границ может быть совершенно разным:

  • пунктирная (dashed)
  • точечная (dotted)
  • сплошная (solid)
  • двойная (double)
  • объемная (groove, outset, ridge, inset) линии

Outline и его возможности

Что касается outline, то по своему назначению он идентичен предыдущему свойству, однако его используют для определения внешней границы элемента. Таким образом, если вы зададите значения сразу двум описанным элементам стилевых таблиц, то border обрамит объект в рамку, а outline расположиться уже вокруг границы.

И все же существуют и другие отличия. Так, outline не влияет на расположение объекта среди другого контента и не изменяет его толщины, что нельзя сказать о предыдущем свойстве.

К тому же данный css-элемент не обладает особой гибкостью. Указанные верстальщиком значения применяются ко всем сторонам внешней рамки и работать только с одной стороной не получится.

Как и border, в текущем свойстве можно устанавливать разный стиль границам. При чем их наименования такие же, как и в предыдущем элементе css.

Что такое псевдоэлементы и для чего они могут пригодиться?

В этой главе я хочу рассказать вам новый материал. В некоторых проектах без знаний данной тематики просто не обойтись.

Итак, псевдоэлементы нужны для форматирования той области элементов, для которой в дереве документа не существует каких-либо селекторов или определений.

Не путайте с псевдоклассами. Они в свою очередь форматируют существующие селекторы и элементы.

В современных правилах определения псевдоэлементов используется двойное двоеточие (::after). Однако если вы используете просто «:», то валидатор пропустит код и не выдаст ошибки.

На сегодняшний день существует множество псевдоэлементов. Ниже в таблице я перечислил популярные.

Псевдоэлемент Назначение
::before С его помощью можно вставить некий текст перед содержимым указанного объекта.
::after С его помощью можно вставить некий текст после содержимого указанного объекта.
::first-line Форматирует первую строчку текстового контента.
::first-letter Задает стиль первого символа в указанном блоке.

Хочу отметить некую особенность применения первых двух псевдоэлементов: они всегда взаимодействуют вместе с свойством, в котором и прописывается сам текст – content.

Практическая часть

Пример использования свойства border

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

Ниже я прикрепил код программы, в которой, как и обещал, реализовал объекты с двойной цветной рамкой. Также некоторым блокам я добавил тень.

Напомню, что это возможно реализовать при помощи такого свойства, как box-shadow. Для него можно указать до пяти значений, которые будут отвечать соответственно за горизонтальный сдвиг, вертикальный сдвиг, радиус размытия, растяжение тени и ее цвет.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Паспарту</title>
  <style>
   body {
  background: #FAFAD2;
  }
 h1 { font-size: 37px; text-align: center; box-shadow:inset 0 0 49px #FFD700; padding: 17px;}
 img {
 margin: 27px 35px 27px 55px;
 border: 3px ridge #ffe;
 outline: 19px solid #CDBA97;
}
#p_main{
text-align: center;
text-shadow: 0 0 9px #1C1C1C;
}
#p_main::first-letter{color: #FFD700; font-size: 25px; font-weight:900;}
  </style>
 
 </head>
 <body>
<h1>Гениальный Леонардо да Винчи</h1>
<div>
  <p id="p_main">Великолепный архитектор, знаменитый живописец и художник, гениальный ученый, опережающий свою эпоху, великий музыкант и писатель.</p>
   <p>
    <img src="http://files.smallbay.ru/images/da_vinci06.jpg" alt="Фотография 1" width="200" height="300">
    <img src="http://www.krugosvet.ru/images/1011752_PH05709.jpg" alt="Фотография 2" width="210" height="300">
    <img src="http://www.calend.ru/img/content_images/i1/1146_or.jpg" alt="Фотография 3" width="300" height="300">
 
  </p>
</div>
 </body>
</html>

Надеюсь данная публикация была вам полезной. Буду очень рад видеть вас в моих подписчиках. Делитесь ссылкой на мой блог с друзьями. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов

Читать полностью
Комментариев 0
Рубрика:Фишки css

Css стили или как выровнять изображение по центру экрана: разбираем что за отступы padding и margin

Приветствую всех читателей данной публикации и подписчиков моего обучающего блога. Сегодня разберем интересную и востребованную тему, связанную с css как выровнять изображение по центру.

Я в деталях расскажу, как установить вокруг картинки отступы и выровнять ее не только по горизонтали, но и по вертикали в текстовом контенте, укажу, какими инструментами веб-языков стоит пользоваться и конечно же приведу конкретные примеры. А теперь приступим к делу!

Читать полностью
Комментариев 0