Главная » Языки программирования

Оформление блока css красиво

Содержание
  1. 12 приемов CSS для создания прекрасных сайтов
  2. 1. Вертикальное выравнивание при помощи flex
  3. 2. Режимы наложения (смешивания)
  4. 3. Параллакс-скроллинг
  5. 4. Shape outside (придание элементу непрямоугольной формы)
  6. 5. Обрезка строки
  7. 6. Обрезка изображения при помощи clip path
  8. 7. Полная высота и ширина
  9. 8. Фильтры изображений
  10. 9. CSS-анимации
  11. 10. Вращение элементов
  12. 11. Маска
  13. 12. Приближение при наведении курсора
  14. Заключение
  15. 43 CSS Borders
  16. Related Articles
  17. Author
  18. Links
  19. Made with
  20. About a code
  21. Animated Border Image
  22. Author
  23. Links
  24. Made with
  25. About a code
  26. Partial Gradient Border
  27. Author
  28. Links
  29. Made with
  30. About a code
  31. Gradient Border with Rounded Corners
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. Background Border
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. Patterned Borders
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Custom Dashed Border
  47. Author
  48. Links
  49. Made with
  50. About a code
  51. Colorful Border
  52. Author
  53. Links
  54. Made with
  55. About a code
  56. Gradient Border Effect
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Gradient Border + Transparent Background
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. Border Linear-Gradient + Border-Radius
  67. Author
  68. Links
  69. Made with
  70. About a code
  71. Corner-only Border
  72. Author
  73. Links
  74. Made with
  75. About a code
  76. 8bit border-image
  77. Author
  78. Links
  79. Made with
  80. About a code
  81. 8-bit Pixel Border
  82. Author
  83. Links
  84. Made with
  85. About a code
  86. Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos
  87. Author
  88. Links
  89. Made with
  90. About a code
  91. Use SVG for border-image
  92. Author
  93. Links
  94. Made with
  95. About a code
  96. CSS Gradient Borders
  97. Author
  98. Links
  99. Made with
  100. About a code
  101. Borders & Gradients
  102. Author
  103. Links
  104. Made with
  105. About a code
  106. Multiple Border-Radius Values
  107. Author
  108. Links
  109. Made with
  110. About a code
  111. CSS Candy Stripe Border Using Clip-Path
  112. Author
  113. Links
  114. Made with
  115. About a code
  116. Offset and XOR Frame: Lively
  117. Author
  118. Links
  119. Made with
  120. About a code
  121. Full Screen Vintage Frame with Multiple Borders
  122. Author
  123. Links
  124. Made with
  125. About a code
  126. Gradient Border
  127. Author
  128. Links
  129. Made with
  130. About a code
  131. Pure CSS Circular Border Patterns
  132. Author
  133. Links
  134. Made with
  135. About a code
  136. Fitted Border Image the Easy Way
  137. Author
  138. Links
  139. Made with
  140. About a code
  141. Map-Inspired Border
  142. Author
  143. Links
  144. Made with
  145. About a code
  146. Blurred Border
  147. Author
  148. Links
  149. Made with
  150. About the code
  151. Magic Borders
  152. Author
  153. Links
  154. Made with
  155. About the code
  156. Interactive Button Border
  157. Author
Читайте также:  Php ini logging errors

12 приемов CSS для создания прекрасных сайтов

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «12 CSS tips and tricks which help you to create an amazing websites».

Приемы CSS

CSS (аббревиатура расшифровывается как «каскадные таблицы стилей») это язык, использующийся для описания того, как должны отображаться HTML-элементы. Это одна из первых технологий, изучаемых будущими фронтенд- и веб-разработчиками. Знать основы CSS это просто «мастхэв».

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

1. Вертикальное выравнивание при помощи flex

Flexible Box Layout Model (или просто Flexbox) со времени своего появления приобрел большую популярность. И это неудивительно, ведь данный подход существенно облегчает позиционирование и выравнивание элементов. Применение flex (свойство flexbox) сделало вертикальное выравнивание быстрым и легким. Давайте рассмотрим пример кода для вертикального позиционирования при помощи flex.

Как видите, чтобы наш элемент-потомок оказался точно в центре родительского элемента, мы использовали свойства display: flex и align-items: center, justify-content: center.

2. Режимы наложения (смешивания)

При помощи CSS можно делать много интересных вещей, в частности, применять режимы наложения слоев. Дли применения режимов наложения есть два свойства: mix-blend-mode (определяет смешивание элементов, находящихся друг за другом) и background-blend-mode (определяет смешивание фоновых изображений). Давайте посмотрим, как это работает:

В этом примере мы задаем изображение и заголовок в виде текста. Текст это тот элемент, который смешивается с изображением. Мы использовали значение overlay (режим перекрытия), но есть еще 15 других значений, которыми можно воспользоваться (попробовать можно здесь).

А теперь давайте посмотрим пример с применением background-blend-mode:

В этом варианте мы видим, как фоновое изображение смешивается с цветом. Первое изображение — исходное, а второе — после применения режима смешивания.

3. Параллакс-скроллинг

Параллакс (Parallax) это очень распространенная вещь в современном веб-дизайне. Эффект основан на том, что скорость прокрутки фонового изображения отличается от скорости прокрутки контента. Давайте посмотрим, как этого можно достигнуть при помощи CSS:

В этом примере вы видите, что наш текст и фоновое изображение движутся по-разному. Мы использовали transformZ для ускорения одного элемента и замедления другого. Круто выглядит, правда?

4. Shape outside (придание элементу непрямоугольной формы)

Еще одна прекрасная фича, имеющаяся в CSS, но мало используемая, — свойство shape-outside. Давайте посмотрим, как это работает:

В этом примере вы видите, как текст обтекает круг. Мы установили значение свойства shape-outside как circle 50%, но можно также поставить треугольник, квадрат (базовые фигуры) или какое-то изображение. Обратите внимание на это свойство — оно стоит того, чтобы познакомиться с ним поближе!

5. Обрезка строки

Терпеть не могу, когда мой текст не вмещается в div. В JavaScript есть несколько способов справиться с этим, но знаете ли вы, что CSS тоже позволяет обрезать текст? Давайте посмотрим:

Вы видите, как CSS обрезает строку и ставит на месте обрезки троеточие. Для обрезки использовались свойства overflow: hidden, white-space: nowrap, а для троеточия — text-overflow: ellipsis.

6. Обрезка изображения при помощи clip path

Бывает, дизайнер подходит к делу чересчур креативно, и вам приходится изыскивать способы вписать изображение в заданную геометрическую форму, например, в треугольник. Для этого можно воспользоваться свойством clip-path:

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

7. Полная высота и ширина

Если мы хотим, чтобы наше приложение или сайт подгонялись под размер зоны просмотра, на помощь приходят единицы измерения vh и vw. Vh означает 100% высоты зоны просмотра, а vw — 100% ширины зоны просмотра. Давайте посмотрим это на примере:

Здесь мы для нашего элемента (синего блока) установили ширину в 50vw, а высоту в 50vh. Это означает, что он должен занимать в ширину 50% от ширины и 50% от высоты зоны просмотра. Если вы попробуете изменить зону просмотра, вы увидите, как будут меняться размеры нашего элемента.

8. Фильтры изображений

Если поработать с изображениями, можно достичь очень интересных эффектов. CSS позволяет использовать большое количество фильтров, чтобы разработчики могли работать с графикой, не прибегая к Photoshop. Ну, например:

Здесь мы для одного изображения использовали 7 разных фильтров.

9. CSS-анимации

Анимации на сайте привлекают внимание пользователя, именно поэтому они так часто используются в веб-дизайне. Давайте посмотрим, как создавать их при помощи CSS:

В этом примере мы создали маленькую точку, которая меняет свою позицию и непрозрачность: при каждом перемещении непрозрачность снижается на 25%, пока не достигнет 100%. Затем процесс повторяется. Разумеется, можно также менять цвет и другие свойства элементов.

10. Вращение элементов

Еще один вид анимации, который можно сделать при помощи CSS, это вращение. Это прекрасный способ немного оживить элемент-загрузчик, логотип или изображение в галерее. Вот как это может выглядеть:

11. Маска

Если вам случалось заниматься графическим дизайном, вы должны знать, насколько полезными бывают маски. А ведь их можно применять не только в графическом редакторе, но и в CSS. Давайте посмотрим, как сделать маску изображения:

В этом примере мы создали маску в форме круга с градиентной заливкой. Также можно в качестве маски использовать SVG-графику, для этого нужно указать путь к файлу (URL).

12. Приближение при наведении курсора

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

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

Заключение

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

Источник

43 CSS Borders

Collection of hand-picked free HTML and CSS border code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 15 new items.

Author

Made with

About a code

Animated Border Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Partial Gradient Border

Author

Made with

About a code

Partial Gradient Border

Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border with Rounded Corners

Author

Made with

About a code

Gradient Border with Rounded Corners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Background Border

Author

Made with

About a code

Background Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Patterned Borders

Author

Made with

About a code

Patterned Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Custom Dashed Border

Author

Made with

About a code

Custom Dashed Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Colorful Border

Author

Made with

About a code

Colorful Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Gradient Border Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border + Transparent Background

Author

Made with

About a code

Gradient Border + Transparent Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Border Linear-Gradient + Border-Radius

Author

Made with

About a code

Border Linear-Gradient + Border-Radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Corner-only Border

Author

Made with

About a code

Corner-only Border

Corner-only border (allows for corner rounding & gradient border).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 8bit border-image

Author

Made with

About a code

8bit border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 8-bit Pixel Border

Author

Made with

About a code

8-bit Pixel Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Use SVG for border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Gradient Borders

Author

Made with

About a code

CSS Gradient Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Borders & Gradients

Author

Made with

About a code

Borders & Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Multiple Border-Radius Values

Author

Made with

About a code

Multiple Border-Radius Values

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Candy Stripe Border Using Clip-Path

Author

Made with

About a code

CSS Candy Stripe Border Using Clip-Path

Create a responsive candy stripe border using the clip-path property on each of the list items in a ul . Change the height, background color, and stripe color very easily.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Offset and XOR Frame: Lively

Author

Made with

About a code

Offset and XOR Frame: Lively

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Full Screen Vintage Frame with Multiple Borders

Author

Made with

About a code

Full Screen Vintage Frame with Multiple Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border

Author

Made with

About a code

Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Circular Border Patterns

Author

Made with

About a code

Pure CSS Circular Border Patterns

The border patterns are created with clip-path on a pseudo-element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Map-Inspired Border

Author

Made with

About a code

Map-Inspired Border

Map-inspired border effect using stacked border & box-shadows . Single HTML element with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Blurred Border

Author

Made with

About a code

Blurred Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Magic Borders

Try to have a dynamic and responsive table that has borders only between cells.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Interactive Button Border

Button with an interactive border gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Border

Author

Источник

Оцените статью
© 2024 Программирование