<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

CSS Основы

CSS Основы

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по CSS. Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с JavaScript позволяют создавать динамические HTML-страницы (DHTML), красота и удобство которых, порой, просто поражают.

Разумеется, для того, чтобы создавать подобные вещи необходимо познакомиться с основами CSS. И данная категория сайта поможет Вам это сделать максимально быстро и эффективно.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS.

2) Способы и их приоритеты задания CSS-стиля.

3) Типы селекторов в CSS.

4) CSS хаки для браузеров.

5) Правила написания CSS.

6) Как создать всплывающую подсказку на CSS.

7) Как изменить внешний вид первой буквы через CSS.

8) Как задать вид курсора через CSS.

9) Как изменить вид курсора при наведении мыши с помощью CSS.

10) Как сделать подменю на CSS.

11) О замене свойства min-width в IE6.

12) О валидности CSS.

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS.

15) Как сделать закруглённые углы через CSS.

16) Как вместо маркера списка поставить своё изображение через CSS.

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS.

19) Что такое дочерние селекторы в CSS.

20) Какие единицы измерения имеются в CSS.

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS.

26) Что такое CSS спрайты.

27) Как прижать футер (подвал) к низу через CSS.

28) Как запретить изменение размеров textarea через CSS.

29) Как нарисовать треугольник через CSS.

30) Как обработать событие click через CSS.

31) Как задать свой курсор через CSS.

32) Как сделать горизонтальное выпадающее меню на CSS.

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS.

35) Можно ли использовать CSS3.

36) Как сделать тень на CSS.

37) Как задать атрибуты cellpadding и cellspacing на CSS.

38) Как сделать div со 100% height.

39) О совместимости z-index и плеера Youtube.

40) Почему плохо использовать -moz, -ms, -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset.

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS.

45) Что такое clearfix.

46) Как частично отменить float.

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS.

50) Что такое less.

51) Как сделать эффект загнутого уголка на CSS.

52) Как сделать отзывчивый "липкий" подвал сайта.

53) Как использовать Google Fonts API.

54) Как использовать сервис Livetools.

55) Как разрешить или запретить выделение текста на CSS.

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS.

57) Зачем нужно свойство page-break-inside в CSS.

58) Как выравнять по центру блок переменной ширины на CSS.

59) Как сделать треугольники на чистом CSS.

60) Сервис по генерации CSS треугольников.

61) Как прижать футер к нижней грани страницы(позиционирование).

62) Как прижать футер к низу страницы(табличный способ).

63) Изучаем Sass. Установка и настройка.

64) Как скрыть элемент на странице на CSS.

65) Изучаем Sass. Основы.

66) Когда использовать reset.css и normalize.css.

67) Сервис по работе с изображениями с мощным API.

68) Как сделать эффект увеличения картинки на CSS.

69) Koala - быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS.

71) Изучаем Sass. Миксины.

72) Изучаем Sass. Математические операции.

73) Анимированная иконка меню на Sass.

74) Изучаем Sass. Функции.

75) Что такое PostCSS.

76) Как установить и настроить PostCSS.

77) Как сделать возможность оценивания на CSS.

78) Изучаем Sass. Стиль написания кода.

79) Изучаем Sass. Расширение родительского селектора.

80) 10 полезных SASS миксинов.

81) Как сделать интро в стиле "Звёздных Войн" на CSS.

82) Bootstrap 4. Введение.

83) Bootstrap 4. Установка.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Контейнеры и ключевые точки.

86) Bootstrap 4. Система сеток.

87) Bootstrap 4. Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4.

89) Bootstrap 4. Что такое Jumbotrons.

90) Bootstrap 4. Утилиты и типография.

91) Bootstrap 4. Компонент Cards.

92) Разницу между class и id на примере тега div.

93) Неудачные элементы веб-дизайна, которые не стоит использовать.

94) Bootstrap 4. Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке. Часть 1.

97) Как верстать PSD макет по Bootstrap сетке. Часть 2.

98) Как использовать псевдоэлементы after и before в CSS.

99) Об особенностях ширины и высоты блока в CSS.

100) Псевдоэлемене after и псевдоклассе last-child.

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

106) Препроцессор LESS, начиная с простого.

107) Как устроена сетка Bootstrap.

108) Модальное окно на Bootstrap. Стилизация.

109) Как сделать фон в CSS

110) Как сделать анимированную кнопку на CSS.

111) Пример адаптивной верстки на Bootstrap.

112) Адаптивная верстка макета (Bootstrap 4.

113) Верстка макета на SASS.

114) Flex-свойства на практике.

115) Адаптивная верстка на
flex
(часть 1).

116) Адаптивная верстка на
flex
(часть 2).

117) Минусы и плюсы использования иконочных шрифтов.

118) Верстка таблицы (SCSS + flexbox).

119) Плавная анимация движения на CSS.

120) Как сделать вкладки на чистом CSS.

121) Нарисовать стрелку на CSS.

122) Плавный переход. CSS свойство transition.

123) Эффект размытия и фокуса на CSS.

124) Свойство transform-origin на примере.

125) Анимация рамки на CSS.

126) Рисуем иконку пользователя на CSS.

127) Рисуем сердечко на CSS.

128) Три эффекта наведения на кнопку.

129) Вcплывающее окно на чистом CSS.

130) Блок со скошенным углом на CSS.

131) Скошенный блок при помощью clip-path.

132) Первая буква логотипа Google.

133) Выноски в стиле комиксов.

134) Коллекция CSS компонентов.

135) Угловая лента на CSS.

136) 3 способа выравнивания блоков по ширине.

137) Виды CSS селекторов.

138) CSS фреймворк Materialize (Установка).

139) CSS фреймворк Materialize (Navbar).

140) Использование переменных в CSS.

141) Как прижать футер к низу страницы.

142) Что нового в Bootstrap 5?

143) CSS Grid Layout #1 (Базовая сетка).

144) CSS Grid Layout #2 (Позиционирование ячеек).

145) Ошибки новичков при верстке сайтов #1.

146) Ошибки новичков при верстке сайтов #2.

147) Ошибки новичков при верстке сайтов #3.

148) Ошибки новичков при верстке сайтов #4.

149) Пример адаптивной верстки на flexbox #1.

150) Пример адаптивной верстки на flexbox #2.

151) CSS Grid. Практические примеры #1.

152) CSS Grid. Практические примеры #2.

153) CSS Grid. Практические примеры #3.

154) CSS Grid. Практические примеры #4.

155) CSS Grid. Практические примеры #5.

156) Пример верстки фотогалереи на CSS Grid #1.

157) Пример верстки фотогалереи на CSS Grid #2.

158) Пример верстки простой секции на CSS Grid #3.

160) Пример верстки формы на CSS Grid #4.

161) Пример верстки блог-секции на CSS Grid #5.

162) Анимация появления текста на CSS.

163) Параллакс эффект на чистом CSS.

164) Анимация подчеркивания ссылок на CSS.

165) Эффект появления рамки при наведении.

166) Анимированный блик у кнопки на чистом CSS.

167) SVG hover эффект для кнопки.

168) Как размыть фон под блоком, используя SVG.

169) Аватар внутри круга на CSS.

170) CSS-эффект при наведении на меню.

171) CSS-эффекты. Градиентная рамка у блока.

172) Навигационное меню с иконками + hover эффект.

173) CSS grid свойство align-items.

174) Переключение меню гамбургер, используя JS.

175) Верстка прозрачной логин формы.

176) Эффект анимированного неонового свечения у кнопки.

177) CSS-эффект при наведении курсора на элемент списка.

178) Чем отличается box-shadow от drop-shadow?.

179) Как сделать слияние полей у формы поиска.

180) Как создать To Do List на чистом CSS (часть 1).

181) Как создать To Do List на чистом CSS (часть 2).

182) CSS эффект потери фокуса и наоборот.

183) Анимированный loader на градиентах и тенях.

184) Градиентная тень у блока на CSS.

185) Красивый hover эффект для блока.

186) Изогнутая тень с помощью псевдоэлементов.

187) Вертикальный текст на CSS.

188) Текст, обтекающий картинку нестандартной формы.

189) Рисуем капли воды с помощью CSS.

190) Необычный эффект при наведении на карточку.

191) Кастомизация иконок FontAwesome.

192) Перемещение placeholder над полем ввода при фокусе.

193) Пример использования CSS переменных для анимации.

194) Как сделать закругленную шапку сайта.

195) Креативный эффект при наведении на изображения. Часть 1.

196) Креативный эффект при наведении на изображения. Часть 2.

197) Трансформация сложенных карточек на CSS.

198) Движение фоновой картинки внутри рамки.

199) Пример @keyframes CSS анимации.

200) Креативная CSS анимация масштабирования.

201) Практический пример использования функции attr в CSS.

202) CSS анимация секции с эффектом волны.

203) Как сделать чашку с блюдцем на CSS.

204) Имитация пара над чашкой с горячим чаем.

205) Анимированный неоновый текст на CSS.

206) Как расположить картинку внутри силуэта.

207) Пример использования CSS функций var() и calc().

208) Поворачивание квадратов. Анимация на CSS.

209) Эффект раскрытия обложки при наведении курсора.

210) CSS анимация падающих звезд.

211) Дизайн карточки на чистом CSS.

212) Человек с потрескавшейся кожей на чистом CSS.

213) Многослойный круг на градиентах и тенях.

214) Эффект бегущей волны на чистом CSS.

215) Креативный CSS hover-эффект для меню навигации.

216) Имитация печатной машинки при наведении на текст.

217) Креативный дизайн блока на CSS.

218) Необычный эффект наведения для дизайна веб-сайтов.

219) Креативная трансформация радиокнопок.

220) CSS эффект пикселизации изображения.

221) Стильная кнопка при наведении (графика + CSS).

222) Рейтинг со смайликами на чистом CSS.

223) Эффект рваной бумаги вокруг картинки.

224) Кнопка-перевертыш с 3D-эффектом.

225) Фигуры с hover-эффектом из сериала "Игра в кальмара".

226) Фигуры с hover-эффектом из сериала "Игра в кальмара".

227) Имитация праздничной ленты на карточке.

228) Креативный кастомный чекбокс на CSS.

229) Красиво оформленная секция с услугами.

230) Полупрозрачный дизайн для бизнес карты.

231) Эффект многослойного текста.

232) Простой footer у веб-сайта.

233) Анимированный footer у веб-сайта (продолжение).

234) Эффект многослойности при наведении на карточку.

235) Замена картинки с искажением при наведении.

236) Портрет с текстовым эффектом.

237) Анимация светящегося куба (3D эффект).

238) Имитация клавиш у клавиатуры на CSS.

Все материалы по основам CSS

Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков
Михаил Русаков