RandArt.ru

Меняющаяся при обновлении картинка.

https://randart.ru/art/JD99/wallpapers/

Как это использовать можно посмотреть на странице моего профиля.
CSS для использования:

.p-profiles .profile-head {
  background-image: url(https://randart.ru/art/JD99/wallpapers/); 
  background-position: bottom;
  background-repeat: no-repeat; 
  background-size: cover; 
}

желающие обзавестись подобной картинкой регистрируемся на сайте
p.s так же с удовольствием поделюсь css своего профиля

css

body {
    counter-reset: heading; /* Инициируем счетчик */
   }
/* Заставляем стиль работать только для PC и выключаться для планшетов, лучше не трогать */
@media only screen and (min-width: 1025px) {


.b-catalog_entry .cover .image-decor .image-cutter {

    max-height: 100%!important;
}
.p-profiles .profile-head, body { 
  	background-image: url(https://randart.ru/art/JD99/izbrannoe/); 
 }
body  { 
       background-position: top; /* положение картинки по центру */
       background-repeat: no-repeat; /* фон не повторяется */
       background-size: contain; 
       background-color: rgb(29, 29, 29);
  /* масштабирует изображение с сохранением пропорций, чтобы оно заполнило контейнер */
 }
/*** Настройка фона шапки профиля ***/
  /*
  .l-page {
    background: linear-gradient(rgba(250,250,250,0) 8%, rgba(250,250,250,1) 22%);
    box-shadow: 0px 0px 0px 0px!important;
  }
  */
.p-profiles .profile-head {
 
  /* ниже идут параметры отображения фона, если не понимаете их предназначение, то не трогайте */
  border-radius: 3px;
  background-color: #111;  цвет фона (на случай, если картинка не загрузилась) 
  background-position: bottom; /* положение картинки по центру */
  background-repeat: no-repeat; /* фон не повторяется */
  background-size: cover; /* масштабирует изображение с сохранением пропорций, чтобы оно заполнило контейнер */
}

/* Если вы решили поставить себе тёмный фон шапки профиля, то можете пропустить этот пункт */
/* Если выбрали светлый фон, то уберите * перед первый свойством background и поставьте перед вторым */
.p-profiles .profile-head .c-brief {
  *background: linear-gradient(rgba(250,250,250,0) 0%, rgba(250,250,250,0.3) 20%, rgba(250,250,250,0.5) 50%, rgba(240,240,240,1) 100%);
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 20%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 100%);
}

/* Теперь настроим цвет текста на фоне шапки */
/* Если выбрали тёмную шапку и не меняли свойства в предыдущем пункте, то можете пропустить этот пункт */
/* Если же вы выбрали белый фон, то поставьте * перед следущими 2-мя свойствами color */
.c-brief header.head h1 {color: #FFF;}
.c-brief header.head .notice,
.c-brief header.head .misc,
.c-brief header.head a.edit,
.p-profiles .profile-head .c-info .c-additionals b,
.p-profiles .profile-head .c-brief header h1.aliases::after,
.p-profiles .profile-head .c-brief header .notice a,
.p-profiles .profile-head .c-info .c-additionals div a,
.profile-actions .mail::before,
.profile-actions .talk::before,
.profile-actions .fav-remove::before,
.profile-actions .ban::before,
.profile-actions .fav-add::before,
.profile-actions .settings::before,
.profile-actions .ignore-add::before {color: #C9C6C6;}


/*** ВАЖНО! ***/
/*** Отображение списков Аниме & Манги в профиле ***/
/* Если в вашем профиле отображаются оба списка, то ничего не трогайте */
/* Если в вашем профиле отображается ТОЛЬКО список Аниме или ТОЛЬКО список Манги, то поставьте * перед первым свойством margin-top, а у второго уберите */
/* Если списки не отображаются совсем, то поставьте * у первого свойства margin-top и уберите у последнего */
.p-profiles-show .lifetime {
  margin-top: 150px; /* Аниме + Манга */
  *margin-top: 80px; /* Что-то одно */
  *margin-top: 0; /* Ничего */
}

/*** Скрываем элементы ***/
/* Уберите * сразу после скобки, если хотите скрыть кнопку */
.profile-actions .ignore-add {*display: none;} /* Кнопка "Добавить в игнор" в ВАШЕМ профиле */

/*** Основной код профиля ***/
/* Тут менять нечего */
.p-profiles .profile-head {
  overflow: visible;
  margin: -15px -15px 30px;
  position: relative;
  height: 350px;
}

.x1000 > .l-page div .profile-head {
  height: 300px;
}

.p-profiles .profile-head .c-brief {
  margin-bottom: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
  padding: 0 15px;
}

.p-profiles .profile-head .c-brief .avatar {margin: -30px 30px 30px 0;}

.p-profiles .profile-head .c-brief .avatar .profile-actions {
  position: absolute;
  bottom: 30px;
  right: 15px;
}

.profile-actions .mail, .profile-actions .talk, .profile-actions .fav-remove,
.profile-actions .ban, .profile-actions .fav-add, .profile-actions .settings,
.profile-actions .ignore-add, .profile-actions .ignore-remove {
  margin-left: 0;
  padding: 10px 10px 8px;
  border-radius: 3px;
}

.profile-actions .mail::before,
.profile-actions .talk::before,
.profile-actions .fav-remove::before,
.profile-actions .ban::before,
.profile-actions .fav-add::before,
.profile-actions .settings::before {font-size: 20px;}

.profile-actions .fav-remove::before {color: #176093;}

.profile-actions .fav-remove::before,
.profile-actions .fav-add::before,
.profile-actions .ignore-add::before,
.profile-actions .ignore-remove::before {font-size: 22px;}

.p-profiles .profile-head .c-brief header {padding: 10px 0 0;}

.p-profiles .profile-head .c-info .c-additionals {
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
  left: 205px;
}

.p-profiles .profile-head .c-history.x2, .p-profiles .profile-head .c-history.x3 {
  position: absolute;
  right: 15px;
  top: 380px;
  z-index: 1;
}

.x1000 > .l-page div .profile-head .c-history.x2, .x1000 > .l-page div .profile-head .c-history.x3 {
  position: absolute;
  right: 15px;
  top: 330px;
  z-index: 1;
}

.p-profiles .profile-head .c-info .c-lists-info {
  width: 47%;
  position: absolute;
  left: 15px;
  top: 380px;
  z-index: 2;
}

.x1000 > .l-page div .profile-head .c-info .c-lists-info {
  width: 47%;
  position: absolute;
  left: 15px;
  top: 330px;
  z-index: 2;
}

.profile-head .c-info .c-lists-info .b-stats_bar .stat_names .stat_name::after {
  padding: 0 5px 0 0;
  content: ",";
}

.x1000 > .l-page div .profile-head .c-info .c-lists-info .b-stats_bar .stat_names .stat_name::after {
  padding: 0 3px 0 0;
  content: ",";
}

.b-stats_bar .stat_names .stat_name .size::before,
.b-stats_bar .stat_names .stat_name .size::after {display: none;}

.p-profiles-show .lifetime {margin-bottom: 0;}
.p-profiles-show .profile-content .activity .title {display: none;}
.p-profiles-show.x1200 .profile-content .c-left {width: 49%;}
.p-profiles-show.x1200 .profile-content .c-right {width: 47%;}
.profile-content > .cc-2 .c-column .cc-2a.m30 {min-height: 230px;}

.profile-content .cc-2 .c-column .cc-2a > .c-column {
  margin-bottom: 30px!important;
  float: none!important;
}

div.inner > div > div > article.c-column.b-catalog_entry.c-character  {

width: 5%;
clear: none; 

}
img {
    border-radius:  2px!important;
}



.to-top-fix {
    background: none;
    border-bottom:  none;
}
 
 .l-top_menu  {
     border-bottom:  none;
     position:  fixed;
     z-index:  10;
    
     left:  0px; 
     right:  0px;
     top:  0px;
     margin:  0 auto;
 }

.graphics-arrow-down {
display: none!important;
}
 .userbox .submenu  {
     display:  inline-block!important;
     height:  auto!important;
     position:  relative;
     float:  none!important;
     background:  transparent;
     margin-left:  0px!important;
     margin-right:  -6px!important;
     overflow:  visible;
border: none;
 }
 
 .userbox .submenu > .entry  {
     background:  transparent;
     border-bottom:  none;
     display:  inline-block;
     min-width:  auto!important;
     line-height:  20px;
     width:  20px;
     padding:  0 8px;
     margin-left:  15px;
    

 }
 .userbox .submenu > .entry:before  { margin-top: -6px;
     visibility:  visible!important;
     border-radius:  1px;
     transition:  backround-color,  0.3s;
     background:  #5a5a5a;
     color:  #f9f9f9;
     display:  block;
     float:  right !important;
     font-size:  12px;
     text-align:  center;
     height:  21px;
     line-height:  21px;
 }
 .userbox .submenu > .entry:nth-child(1)  {
     width:  61px;
 }
 .userbox .submenu > .entry:nth-child(2)  {
     width:  61px;
     margin-left:  5px;
 }
 .userbox .submenu > .entry:nth-child(1):before  {
     content:  "АНИМЕ";
     width:  61px;
 }
 .userbox .submenu > .entry:nth-child(2):before  {
     content:  "МАНГА";
     width:  61px;
 }
 .userbox .submenu > .entry:nth-child(3):before,  .menu:hover .submenu > .entry:nth-child(3):before  {
     content:  "";
     width:  21px;
     height:  20px;
     background-image:  url(http://i.imgur.com/JcoSHub.png);
     background-color:  transparent;
     background-position:  center;
     opacity:  0.8;
 }
 .userbox .submenu > .entry:nth-child(5):before,  .menu:hover .submenu > .entry:nth-child(5):before  {
     content:  "";
     width:  21px;
     height:  20px;
     background-image:  url(http://i.imgur.com/Cwrn1QN.png);
     background-color:  transparent;
     background-position:  center;
     opacity:  0.8;
 }
 .userbox .submenu > .entry:nth-child(4):before,  .menu:hover .submenu > .entry:nth-child(4):before  { 

  
     content:  "";
     width:  21px;
     height:  20px;
 background: url(http://funkyimg.com/i/2kmPh.png) ; 
     background-color:  transparent;
     background-position:  center;
     opacity:  0.8;
 }
 .menu:hover .submenu > .entry:before  {
     background:  #6a6a6a;
 }
 .userbox .submenu > .entry:hover:before  {
     background:  #7a7a7a;
 }
 .menu:hover .submenu > .entry:nth-child(4):before,  .menu:hover .submenu > .entry:nth-child(3):before,  .menu:hover .submenu > .entry:nth-child(5):before  {
     opacity:  0.9;
 }
 .userbox .submenu > .entry:nth-child(4):hover:before, .userbox .submenu > .entry:nth-child(3):hover:before,  .userbox .submenu > .entry:nth-child(5):hover:before  {
     opacity:  1;
 }
 .userbox .submenu > .entry  {
     visibility:  hidden!important;
 }
 .userbox .submenu > .entry:nth-child(4)  {
 /*    display:  none!important;*/
 }

     .l-page  {
     margin:  65px auto 15px;
     border-radius:  4px;
 }
 
.l-top_menu {
     /*background:  url(/assets/background/px_by_Gre3g.png) repeat fixed;
     top: -1px;*/
    -webkit-box-shadow: 0 1px 10px 0px ;
       -moz-box-shadow: 0 1px 10px 0px ;
            box-shadow: 0 1px 10px 0px ;
}

.l-page{

    -webkit-box-shadow: 0 1px 10px 0px ;
       -moz-box-shadow: 0 1px 10px 0px ;
            box-shadow: 0 1px 10px 0px ;
}

.image-cutter {
    counter-increment: heading; /* Указываем идентификатор счетчика */
    content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <h2> */
   }

:root{
    --color-blue: 100%!important; 
}
.avatar>img {
    border-radius: var(--color-blue);
    border-radius: 100%!important; 
    box-shadow: 0 2px 8px 1px rgba(0,0,0,.16);
}

}

}
/*** КОНЕЦ СТИЛЯ ПРОФИЛЯ ***/

Комментарии

Скрыть 3 комментария

Показать 3 комментария

Загрузить ещё 3 комментария

Grand🌊Balaxon13 марта 2022#

@▕▏, это не срань, а прикольный сайт, который держит парень за свой счет и которая все еще работает, хотя черт знает на чьих серверах он это все держит, так что если RandArt умрет, это будет грустно, но я не удивлюсь

@▕▏

▕▏15 марта 2022#

@Grand🌊Balaxon,
чел я образно сказал, потому что на тот момент оно не работало
точнее сайт работал
но войти в свой акк с шикимори было невозможно
я несколько дней бился вот у меня и подгорело
но потом связался с челом и он исправил
да штука прикольная

▕▏15 апреля 2023#

Доброго времени суток.
Из-за смены домена шики - тут не авторизоваться через сайт
да и ссылки перестали работать оттуда, покрайней мере на шики (((

Твой комментарий