CSS примеры

Пример номер 1


Рамки

Разных

Цветов


<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

Пример номер 2


Я вас любил: любовь еще, быть может,
В душе моей угасла не совсем;
Но пусть она вас больше не тревожит;
Я не хочу печалить вас ничем.
Я вас любил безмолвно, безнадежно,
То робостью, то ревностью томим;
Я вас любил так искренно, так нежно,
Как дай вам бог любимой быть другим.

<style<
p {
  text-align: center;
  color: red;
}
</style<

Пример номер 3





    
  
  • Улучшили список
    • 
  
  • При помощи
    • 
  
  • CSS
    • 



<style>
  ul {
    font-size: 1 em;
    list-style: square inside;
  }
</style>

<ul>
  <li>Улучшили список</li>
  <li>При помощи</li>
  <li>CSS</li>
</ul>

Пример номер 4






 
ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ




<style>
 .outer {
  border: solid;
  width: 280px;    
 }
 .inner {
  background: gold;
  margin-top: 40px;
 }
</style>

<div class="outer">
 <div class="inner">ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ</div>
</div>

Пример номер 5





  
1

  
2

  
3

  
4

  
5

  
6

  
7

  
8

  
9




<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1px;
}
#grid > div {
  background-color: orangered;
  color: white;
  font-size: 4vw;
  padding: 10px;
}
#grid > div:first-child {
  grid-row-start: 2;
  animation: myAnimation 1s ease 1s 5 alternate forwards;
  background: limegreen;
  }

@keyframes myAnimation {
  100% {
  grid-row-start: 3;
  }
</style>
<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Комментарии

Отправить комментарий

Популярные сообщения