ZorNet.Ru — сайт для вебмастера » HTML и CSS » Смайл для фона сайта на чистом CSS

Смайл для фона сайта на чистом CSS

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

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

HTML

Код

CSS

Код

:root {
  --green: rgb(192, 234, 15);
  --green-fade: rgba(168, 204, 17, 0.5);
  --accent-green: rgb(102, 181, 20);
  --dark-green: rgb(35, 51, 10);
  --red-fade: rgba(171, 12, 12, 0.3);
}
body{
  background:var(--dark-green)linear-gradient(white 30%, green 70%, var(--dark-green)90%) no-repeat;
}
.gradiyent{
  width:250px;
  height:250px;
  background:radial-gradient(circle at 50% 30%, white, var(--green) 50%,var(--dark-green)95%);
  border-radius:50%;
  position:relative;
  margin:200px auto;
  border:2px solid var(--dark-green);
  box-shadow:inset 0 0 20px 10px darkgreen, 0 5px 10px 3px black;
}
.kartinka-po-tsentru{
  width:40px;
  height:45px;
  background:var(--accent-green);
  box-shadow:inset 0 0 5px 3px var(--dark-green);
  border-radius:50%;
  position:absolute;
  top:80px;
  left:65px;
}
.izobrazheniye{
  width:40px;
  height:45px;
  background:var(--accent-green);
  box-shadow:inset 0 0 5px 3px var(--dark-green);
  border-radius:50%;
  position:absolute;
  top:80px;
  right:65px;
}
.kartinka-po-tsentru::before{
  content:"";
  z-index:3;
  width:80px;
  height:75px;
  position:absolute;
  background:radial-gradient(circle at 0 0, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
  border-radius:50%;
  bottom:50px;
  right:15px;
  transform:rotateZ(20deg);
}
.izobrazheniye::before{
  content:"";
  z-index:3;
  width:80px;
  height:75px;
  position:absolute;
  background:radial-gradient(circle at 100% 0, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
  border-radius:50%;
  bottom:50px;
  left:15px;
  transform:rotateZ(-20deg);
}

.fonovoye{
  z-index:3;
  width:100px;
  height:95px;
  position:absolute;
  background:radial-gradient(circle at 50% 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
  border-radius:50%;
  top:140px;
  left:74px;
}
.fonovoye::before{
  content:"";
  z-index:3;
  width:80px;
  height:55px;
  position:absolute;
  background:radial-gradient(circle at 0 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
  border-radius:50%;
  top:0;
  right:80px;
}
.fonovoye::after{
  content:"";
  z-index:3;
  width:80px;
  height:55px;
  position:absolute;
  background:radial-gradient(circle at 100% 100%, transparent 80%, var(--dark-green)80%, var(--accent-green) 90%, var(--dark-green) 90%);
  border-radius:50%;
  top:0;
  left:80px;
}
.fonovaya-kartinka{
  width:70px;
  height:70px;
  background:radial-gradient(var(--red-fade) 5%, transparent 70%);
  position:absolute;
  bottom:50px;
  left:25px;
  border-radius:50%;
}
.smayl-na-portal{
  width:70px;
  height:70px;
  background:radial-gradient(var(--red-fade) 5%, transparent 70%);
  position:absolute;
  bottom:50px;
  right:25px;
  border-radius:50%;
}

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

Демонстрация

12 Августа 2019 Загрузок: 1 Просмотров: 917 Комментариев: (2)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 2
Порядок вывода комментариев: -SAM- 15 Августа 2019 01:54¹ +2 Для оформления страницы 404 покатит - будет нестандартно. Если много страниц создаётся - нет... и не в том плане, что будет не оригинально, просто нецелесообразно... сложно будет переписать непонимающему человеку, к примеру, чтобы какой-то другой смайл отобразить, там уже в ход идёт по старинке графический редактор или применяются векторные изображения... и там намного проще, чем писать большой кусок кода, который, ко всему прочему, будет не во всех браузерах работать... так, как задумывалось. Так что, я бы сказал, что отличный пример того, на что нынче способны html5 и css3, как оно будет после смотреться в последних версиях браузерах... и больше для гиков, в хорошем смысле этого слова... для людей же, которые не вдаются в устройство той или иной "красоты" - это и не важно, как там в исходном коде чего устроено... для них главное, чтобы работало, быстро всё и красиво смотрелось... но, как уже сказал, что в данном случае может конечный результат оказаться обратным, нежели применение давно проверенных решений. Kosten 15 Августа 2019 15:24² 0 Тема понравилась, что на css все выстроено, где основном находишь на сайте codepen.io, но некоторый материал идет на scss, что некоторый можно на CSS перевести без потери качество.