Эксперименты Will O The Wisp

Страница: « 1 … 9 10 11 12 13 … 19 »

Сообщений 101 страница 110 из 187

Поделиться10102.12.22 15:41

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

#p177109,Gerda написал(а):

можно забрать?
крутой диз, его можно под форум любой тематики натянуть.

почистить его? у меня там куча дополнительных оформлений которые будут лишними

Поделиться10202.12.22 16:03

Автор: Gerda
технозомби
Уважение: +9803
Достижения/подарки: 8 16
Наградные баллы: 1612
Проверенный спец:
FD
FD

#p177111,Will O The Wisp написал(а):

#p177109,Gerda написал(а):
можно забрать?
крутой диз, его можно под форум любой тематики натянуть.
почистить его? у меня там куча дополнительных оформлений которые будут лишними

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

Портфолио https://forumd.ru/viewtopic.php?id=3833

Поделиться10303.12.22 13:35

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

таблица

Код:

<!--Текст в шапку-->
<div id="tableFont">
<div id="news">
<a href="#"> 🐰 Гостевая</a>
</div>
<div id="news">
<a href="#"> 🐱 Анкета</a>
</div>
<div id="news" style="margin-left: 120px;">
<a href="#"> 🐭 ФАК</a> 
</div>
<div id="news">
<a href="#"> 🦊 Анкета</a> 
</div>
<style>
#news {
    position: relative;
    margin-left: 80px;
    padding: 3px;
    width: 120px;
    height: 18px;
    background: #ffffff73;
    border-radius: 20px;
    display: inline-block;
    top: -10px;
text-align: center;
}

#news a{
    font-family: 'mr_honeybeeg';
    color: #000;
    font-size: 11px;
}

</style>

<div style="
    margin: 20px 0px 0px 6px;
    background: #ffffff;
    width: 963px;
    height: 140px;
position: absolute;
">   

<div style="
margin-left: 10px;
position: absolute;
top: -15px;
width: 190px;
font-family: Klaristha-Thin;
color: #aaa7e1;
font-size: 3em;
text-shadow: 2px 2px 2px #ecccc1;
font-weight: 600;
height: 20px;
text-align: center;
">
Intro
</div>
<div style="
margin-left: 10px;
position: absolute;
top: 20px;
width: 190px;
color: #6763b1;
font-size: 10px;
text-shadow: 2px 2px 2px #fff;
font-weight: 400;
height: 115px;
text-align: justify;
background: #9ca1d745;
overflow: auto;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<div style="
margin-left: 210px;
position: absolute;
top: -15px;
width: 190px;
font-family: Klaristha-Thin;
color: #aaa7e1;
font-size: 3em;
text-shadow: 2px 2px 2px #ecccc1;
font-weight: 600;
height: 20px;
text-align: center;
">
Personalities
</div>
<div style="
margin-left: 225px;
position: absolute;
top: 25px;
width: 190px;
">

<style>
.minreqpic {
  border: 1px solid #dedede;
  padding: 3px;
  background-color: #fff;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

.minreqpic img{
  width: 40px;
  height: 40px;
}
 

</style>
    	<table>
        <tr>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='тут'></div>
        	</td>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='там'></div>
        	</td>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='тут'></div>
        	</td>
        </tr>
    	</table>
    	<table>
        <tr>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='там'></div>
        	</td>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='дам'></div>
        	</td>
        	<td>
            <div class="minreqpic"><img src="https://i.ibb.co/x7GDbZm/image.png" title='бым'></div>
        	</td>
        </tr>
    	</table>

</div>




<div style="
margin-left: 550px;
position: absolute;
top: -15px;
width: 160px;
font-family: Klaristha-Thin;
color: #aaa7e1;
font-size: 3em;
text-shadow: 2px 2px 2px #ecccc1;
font-weight: 600;
height: 20px;
text-align: center;
">

News

</div>
<div style="
margin-left: 555px;
position: absolute;
top: 20px;
width: 165px;
color: #6763b1;
font-size: 10px;
text-shadow: 2px 2px 2px #fff;
font-weight: 400;
height: 115px;
text-align: justify;
background: #9ca1d745;
overflow: auto;
">

<p class="data">93/19/2922</p>Lorem ipsum dolor sit amet laborum<br>
</div>

<style>
#u-ava{
position: absolute;
margin: 0px 0px 0px 0px;
}
#u-text a{
font-size: 1.4em;
width: 100%;
display: block;
color: #a6a6df;
margin-top: 10px;
text-shadow: none;
height: 20px;
text-align: center;
text-overflow: ellipsis;
border-bottom: 2px solid #aea9e3;
white-space: nowrap;
font-family: mr_honeybeeg;
font-weight: 400;
}
 #u-text {
margin: 0px 0px 0px -115px;
position: absolute;
width: 90px;
padding: 2px;
height: 105px;
}

</style>
<div style="
    margin-left: 837px;
    padding-top: 0px;
    top: 15px;
    position: absolute;
">

<div id="u-ava"></div>

<script type="text/javascript">
if (UserAvatar == ""){UserAvatar = "https://i.imgur.com/Loj69oi.png"}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-ava") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href='/profile.php?section=avatar&id="+UserID+"' title='Сменить аватар'><img style='max-width:110px;max-height:110px;border: 5px double #9ca0d7;' src="+UserAvatar+"></a>"+name
}
if(arr[i].id=="u-ava" && GroupID == "3") {
arr[i].innerHTML="<a href='/register.php'><img style='padding-top:0px; max-width:110px;max-height:110px;border: 5px double #9ca0d7;' src='https://i.ibb.co/x7GDbZm/image.png' title='Зарегаться'></a>"+name
}
i++}
</script>

<div id="u-text"></div>
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-text") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href='/respect.php?id="+UserID+"'>Уважение</a><a href='/profile.php?id="+UserID+"'>Мой профиль</a> <a href='/messages.php'>Личные сообщения</a>"+name
}i++}
</script>
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id == "u-text" && GroupID == "3"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<li id=\'navpiar\'><a onclick='/viewtopic.php?id=2'><span style=\'cursor:pointer\'>Будь как дома</span></a></li>"
}i++}
</script>

<figure>
    <audio
        controls
        src="#" style="width: 110px;height: 20px;position: absolute;margin: 100px 0px 0px -115px;filter: opacity(0.2);">
    </audio>
</figure>

</div>

<div style="
margin-left: 404px;
position: absolute;
    padding-top: 0px;
    top: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: url(https://64.media.tumblr.com/94f4d2da6f09060a751afba0b47842d9/ada143f7b4c4ec19-e0/s500x750/d1ce754718352c043a559fe8a01e2a6eaf7d57e7.gif);
    background-color: #ccc;
    background-position: center center;
    background-size: cover;
    background-blend-mode: overlay;
z-index: 0;
">
</div>

<div style="
margin-left: 509px;
position: absolute;
padding-top: 0px;
top: -30px;
width: 50px;
height: 50px;
background: url(https://i.imgur.com/Czy3XLw.png);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
">
</div>
<div style="
margin-left: 410px;
    position: absolute;
    top: 85px;
    width: 180px;
    font-family: Klaristha-Thin;
    color: #aaa7e1;
    font-size: 3em;
    text-shadow: 2px 2px 2px #ecccc1;
font-weight: 600;
height: 20px;
">

Название 

<b style="font-size: 0.5em !important;
color: #eca1d8;
font-family: mr_honeybeeg;
line-height: 1px;
position: absolute;
margin: 44px 0px 0px -122px;
width: 170px;
text-shadow: 0 0 #9b9fd6;
text-transform: lowercase;
font-weight: 400;
height: 10px;">
Названия
</b>
</div>
</div>

стрелки

Код:

<!--Стрелки вверх и вниз-->
<div style="position:fixed;z-index:1002; right: 10%; bottom: 30%;">
<a href="#top" onclick="$('html,body').scrollTop(0); return false;">
<img src="https://i.imgur.com/Czy3XLw.png" alt="Вверх страницы" style="
    position: fixed;
    margin-left: 1px;
    width: 5vw;
    margin-top: -60px;
    filter: hue-rotate(320deg);
"></a>
<br>
<a href="#bottom" onclick="$('html,body').scrollTop(document.body.scrollHeight); return false;">
<img style="width: 5vw;  filter: hue-rotate(320deg);" src="https://i.imgur.com/Czy3XLw.png" alt="Вниз страницы"></a>
</div>
<!-- КОНЕЦ -->

можно еще баннеры

Код:

<!---------------------------- баннеры ---------------------------->
<div id="partners"> 
<div style="text-align: center;"> 

<style>
:root {
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 60s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}



.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

/* Parent wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 100vw;
}


</style>

<article class="wrapper">
  <div class="marquee">
    <div class="marquee__group">
<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>

    <div aria-hidden="true" class="marquee__group">
<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>
  </div>

  <div class="marquee marquee--reverse">
    <div class="marquee__group">
<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://i.ibb.co/W6fbW9T/image.png" border="0" title="Lorem ipsum dolor sit amet"/></a>
    </div>

    <div aria-hidden="true" class="marquee__group">
<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

<a href="#" target="_blank" ><img src="https://forumupload.ru/uploads/0007/e3/f7/2/266136.gif" border="0" title="Lorem ipsum dolor sit amet"/></a>

    </div>
  </div>
</article>

</div>
</div>
<style>#partners {text-align: center;
height: 70px;
margin: 35px 0px 0px -10px;
overflow-y: auto;
position: absolute;
width: 960px;
z-index: 100;
padding: 3px;
border: 2px solid #c8d6e1;
background: url(https://i.ibb.co/7R3RgQR/image.png);
overflow: hidden;
box-shadow: #c8d6e1 0px 1px 4px 0px;}
#partners:hover {    filter: none;}
#partners img {opacity: 0.8;}
#partners img:hover, #partners img:focus {opacity: 1.0;}
</style>

Поделиться10403.12.22 13:38

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

#p177112,Gerda написал(а):

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

там именно что картинки в шапке рандомные, под профиль тоже
не требуют обрезки и подгонки
разве что выглядеть будут потом не очень где-то

Поделиться10503.12.22 13:44

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

дополнительно: оформление форумов

Код:

<table>
  <tr>
    <td style="width: 30%;"><a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br>
<a href="#" class="anew1">гостевая книга</a><br></td>
    <td><p align="justify";>
<i>Описание</i>  Не думайте, что я уклоняюсь от работы. Я люблю работу. Работа увлекает меня. Я часами могу сидеть и смотреть, как работают.
  </tr>
</table>

плюсы

Код:

<!--// Быстроплюсы v.2 РЕНО by Deff //-->
<script type="text/javascript" src="https://forumstatic.ru/files/0012/d8/04/58219.js" addComment="1"></script>

использование рамок для картинок в этом месте

Код:

.post-content img[alt="imgBorder"] {
    background: url(http://www.lenagold.ru/fon/pred/bum/map/map01.jpg) repeat;
    padding: 10px 10px 10px 10px;
    width: 90%;
}

картинки для анкет и оформления применять так:
img=imgBorder] тут оно самое[/img
со скобами

Поделиться10606.12.22 13:25

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

меню-меню
можно вставить в объявление и любоваться

Код:

<style>
.social {
  position: fixed;
  top: 20px;
}
.social ul {
  padding: 0px;
  -webkit-transform: translate(-550px, 0);
  -moz-transform: translate(-550px, 0);
  -ms-transform: translate(-550px, 0);
  -o-transform: translate(-550px, 0);
  transform: translate(-550px, 0);
}
.social ul li {
  display: block;
  margin: 5px;
  background: rgba(0, 0, 0, 0.36);
  width: 300px;
  text-align: right;
  padding: 10px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li:hover {
  -webkit-transform: translate(110px, 0);
  -moz-transform: translate(110px, 0);
  -ms-transform: translate(110px, 0);
  -o-transform: translate(110px, 0);
  transform: translate(110px, 0);
  background: rgba(255, 255, 255, 0.4);
}
.social ul li:hover a {
  color: #000;
}
.social ul li:hover i {
  color: #fff;
  background: red;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li i {
  margin-left: 10px;
  color: #000;
  background: #fff;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: #ffffff;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

</style>

  
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="social">
          <ul>
              <li><a href="#">Форум<i class="fa fa-comments"></i></a></li>
              <li><a href="#">Не форум<i class="fa fa-folder-open"></i></a></li>
              <li><a href="#">Еще форум<i class="fa fa-database"></i></a></li>
              <li><a href="#">Снова<i class="fa fa-long-arrow-up"></i></a></li>
          </ul>
      </nav>

Поделиться10706.12.22 14:26

Автор: Automation Baby
Атаманша
Уважение: +8286
Достижения/подарки: 7 6
Наградные баллы: 1 085

#p177088,Will O The Wisp написал(а):

код добавляет гирлянду к элементу с примерами использования
хотя как это использовать я не знаю

Will O The Wisp Я всё равно это добавила: Новогодние украшения для форума и сайта (css/js)
Штука крутая!
smile

Поделиться10806.12.22 15:31

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

Елочка интерактивная, кредиты в коде

Код:

[html]
<style>
.cc
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.bc
{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*============================*/
/*============TREE============*/

.tree
{
  width: 70vh;
  height: 80%;
}

.segment::before
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #1f4f15 transparent;
  border-radius: 40%;
}

.segment
{
  top: 35%;
  overflow: hidden;
}

.segment::after
{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-color: transparent transparent #F9F9F9 transparent;
  border-radius: 35%;
}

.segment[value="0"]{width: 70vh; height: 70vh; z-index:0;}
.segment[value="1"]{width: 50vh; height: 50vh; z-index:1;}
.segment[value="2"]{width: 30vh; height: 30vh; z-index:2;}
.segment[value="0"]::before{border-width: 35vh;}
.segment[value="1"]::before{border-width: 25vh;}
.segment[value="2"]::before{border-width: 15vh;}
.segment[value="0"]::after{border-width: 23.5vh;}
.segment[value="1"]::after{border-width: 14vh;}
.segment[value="2"]::after{border-width: 7vh;}

.highlight
{
  position: absolute;
  width: 10%;
  height: 35%;
  bottom: 3.25%;
  left: 67.25%;
  border-radius: 0 0 0 100%;
  transform: rotate(-45deg);
  background: #216315;
}

.stump
{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 15vh;
  height: 25vh;
  background: #3f2b27;
  transform: translateX(-50%);
  border-radius: 6vh;
  overflow: hidden;
}

.stump::after
{
  content: ' ';
  position: absolute;
  right: 0;
  width: 15%;
  height: 100%;
  background: #47332b;
  border-radius: 0 0 0 100%;
}

.ball
{
  position: absolute;
  bottom: 0;
  width: 5vh;
  height: 5vh;
  border-radius: 5vh;
  background: #7a3232;
  transform-origin: 50% -50%;
  transition: all 0.2s ease-in-out;
  z-index: 3;
}
.ball::after
{
  content: ' ';
  position: absolute;
  top: 10%;
  right: 12.5%;
  width: 50%;
  height: 40%;
  border-radius: 100%;
  background: #D14B4B;
}

.ball:nth-child(1) 
{
    bottom: 10%;
    left: 20%;
}

.ball:nth-child(2) 
{
    bottom: 7.5%;
    left: 65%;
}

.ball:nth-child(3) 
{
    bottom: 3%;
    left: 42.5%;
}

/*============TREE============*/
/*============================*/

/*============================*/
/*==========PRESENTS==========*/
.present:before
{
  content: ' ';
  display: none;
}

.present.open::before
{
  position: absolute;
  width: 100%;
  height: 35%;
  transform: translateY(-100%);
  background: #5B1616;
  border-radius: 10%;
  display: block;
}

.present
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 12vh;
  height: 12vh;
  background: #7f2121;
  transition: transform 0.2s ease-in;
  transform-origin: center center;
  border-radius: 10%;
  cursor: pointer;
}

.bow
{
  width: 30%;
  height: 100%;
  background: #D4C228;
  z-index: 2;
}
 
.bow::after
{
  content: ' ';
  display: block;
  width: 90%;
  height: 100%;
  background: #E0CF43;
  transform: rotate(90deg);
}

.bow:nth-child(2)
{
  top: 0;
  left: -62.5%;
  width: 175%;
  height: 30%;
  transform: translate(14%,-100%) scale(0.575);
  z-index: 2;
  background: #847A23;
  display: none;
}

.bow:nth-child(2)::after
{
  position: absolute;
  top: -49%;
  left: 31.5%;
  width: 37.5%;
  height: 175%;
  background: #9D912D;
}

.present.open .bow:nth-child(2)
{
  display: block;
}
/*==========PRESENTS==========*/
/*============================*/
/*============================*/
/*==========LETTERS===========*/
.letter
{
  position: absolute;
  font-size: 5vh;
  color: white;
  transition: all 1.2s ease-in-out;
  text-align: center;
}
/*==========LETTERS===========*/
/*============================*/
</style>
<script>
/*
  * Made by C.Dinkelborg for GetDigital 
  * Geekolaus Aktion 
  * Aktionscode: G6NK5AUVB
  * @2016 all rights reserved
*/

var balls = document.getElementsByClassName("ball");

var presents = document.getElementsByClassName("present");

for(var i=0; i<balls.length; i++)
{
  balls[i].addEventListener("mouseover",onMouseOverBall);
  balls[i].addEventListener("touchstart",onMouseOverBall);
};

for(var i=0; i<presents.length; i++)
{
  presents[i].addEventListener("mouseover",onMouseOverPresent);
  presents[i].addEventListener("click",onClickPresent);
};

function onMouseOverBall(e)
{
  if(!this.swinging)
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of ball
    {
      this.swinging = true;
      this.style.transform = "rotate(-45deg)";
      setTimeout(function(){swing(this,300-70)}.bind(this),300);
    } 
    else
    {
      this.swinging = true;
      swing(this,300);
    }
  }
}

function swing(ball,time)
{
  //console.log(ball);
  if(ball.style.transform == "rotate(45deg)")
  {
    ball.style.transform = "rotate(-45deg)";
  }
  else
  {
    ball.style.transform = "rotate(45deg)";
  }
  if(time>0)
  {
    setTimeout(function()
    {
      swing.call(this, ball,time-70);
    },time);
  }
  else 
  {
    ball.style.transform = ""; 
    ball.swinging = false;
  }
}

function onMouseOverPresent(e)
{
  if(!this.wiggling && !this.classList.contains("open"))
  {
    var rect = this.getBoundingClientRect();
    if(e.clientX < (rect.left+this.clientWidth/2)) // This means mouse is left of present
    {
      this.wiggling = true;
      this.style.transform = "rotate(45deg)";
      setTimeout(function(){wiggle(this,300-70,"left")}.bind(this),300);
    } 
    else
    {
      this.wiggling = true;
      wiggle(this,300,"right");
    }
  }
}

function onClickPresent()
{
  setTimeout(function()
  {
    this.classList.add("open"); 
    unfold();
  }.bind(this),1000);
}

function wiggle(present,time,direction)
{
  if(direction == "left")
  {
    if(present.style.transform == "rotate(45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(45deg)";
    }
  }
  else
  {
    if(present.style.transform == "rotate(-45deg)")
    {
      present.style.transform = "rotate(0deg)";
    }
    else
    {
      present.style.transform = "rotate(-45deg)";
    }
  }
  if(time>0)
  {
    setTimeout(function()
    {
      wiggle.call(this, present,time-70,(direction == "left")?"right":"left");
    },time);
  }
  else 
  {
    present.style.transform = ""; 
    present.wiggling = false;
  }
}

var letters = document.getElementsByClassName("letter");
function unfold()
{
  for(var i=0; i<letters.length; i++)
  {
    letters[i].style.top = "-75vh";
    letters[i].style.transform = "translateY("+i*5+"vh)";
  }
}


//SNOW EFFECT WITH KIND SUPPORT FROM 
//http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
window.onload = function(){
	//canvas init
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	//canvas dimensions
	var W = window.innerWidth;
	var H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	//snowflake particles
	var mp = 25; //max particles
	var particles = [];
	for(var i = 0; i < mp; i++)
	{
    particles.push({
    	x: Math.random()*W, //x-coordinate
    	y: Math.random()*H, //y-coordinate
    	r: Math.random()*4+1, //radius
    	d: Math.random()*mp //density
    })
	}
	
	//Lets draw the flakes
	function draw()
	{
    ctx.clearRect(0, 0, W, H);
    
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.beginPath();
    for(var i = 0; i < mp; i++)
    {
    	var p = particles[i];
    	ctx.moveTo(p.x, p.y);
    	ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
    }
    ctx.fill();
    update();
	}
	
	//Function to move the snowflakes
	//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
	var angle = 0;
	function update()
	{
    angle += 0.01;
    for(var i = 0; i < mp; i++)
    {
    	var p = particles[i];
    	//Updating X and Y coordinates
    	//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
    	//Every particle has its own density which can be used to make the downward movement different for each flake
    	//Lets make it more random by adding in the radius
    	p.y += Math.cos(angle+p.d) + 1 + p.r/2;
    	p.x += Math.sin(angle) * 2;
    	
    	//Sending flakes back from the top when it exits
    	//Lets make it a bit more organic and let flakes enter from the left and right also.
    	if(p.x > W+5 || p.x < -5 || p.y > H)
    	{
        if(i%3 > 0) //66.67% of the flakes
        {
        	particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
        }
        else
        {
        	//If the flake is exitting from the right
        	if(Math.sin(angle) > 0)
        	{
            //Enter from the left
            particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
        	}
        	else
        	{
            //Enter from the right
            particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
        	}
        }
    	}
    }
	}
	
	//animation loop
	setInterval(draw, 33);
}
</script>
<canvas id="canvas"></canvas>

<div class="tree cc">
  <div class="stump">
  </div>
  <div class="segment cc" value="0">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="highlight bc"></div>
    <div class="segment cc" value="1">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="highlight bc"></div>
      <div class="segment cc" value="2">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="highlight bc"></div>
      </div>
    </div>
  </div>
  <div class="present">
    <div class="bow cc"></div>
    <div class="bow cc"></div>
    <div class="letter cc">F</div>
    <div class="letter cc">R</div>
    <div class="letter cc">O</div>
    <div class="letter cc">H</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc"> </div>
    <div class="letter cc">F</div>
    <div class="letter cc">E</div>
    <div class="letter cc">S</div>
    <div class="letter cc">T</div>
    <div class="letter cc">!</div>
  </div>
</div>

[/html]

Поделиться10907.12.22 16:00

Автор: Automation Baby
Атаманша
Уважение: +8286
Достижения/подарки: 7 6
Наградные баллы: 1 085

#p177279,Will O The Wisp написал(а):

Елочка интерактивная, кредиты в коде

Спасибо за находку, опубликовала: Новогодние украшения для форума и сайта (css/js)

Хотя ты и сам можешь публиковать в темы с украшениями, если хочешь.

Поделиться11008.12.22 12:00

Автор: Will O The Wisp
Участник
Уважение: +563
Достижения/подарки: 0 5
Наградные баллы: 440

Automation Baby
я тут в таком софтовом варианте, ничего не комментирую, а надо бы окончательно доводить до рабочего состояния
какие-то принципы может будут полезны, но в целом ради хранения и запоминания коды

Страница: « 1 … 9 10 11 12 13 … 19 »

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

GEMcross

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

📣 Наш проект: Ролевой поисковик

❤️ Поддержать проект

SPECIAL OFFER: We distribute designs for free

Support the project

Информация о пользователе

Эксперименты Will O The Wisp

Сообщений 101 страница 110 из 187

Поделиться10102.12.22 15:41

Поделиться10202.12.22 16:03

Поделиться10303.12.22 13:35

Поделиться10403.12.22 13:38

Поделиться10503.12.22 13:44

Поделиться10606.12.22 13:25

Поделиться10706.12.22 14:26

Поделиться10806.12.22 15:31

Поделиться10907.12.22 16:00

Поделиться11008.12.22 12:00