Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   С новым 2018-тым (https://javascript.ru/forum/offtopic/72012-s-novym-2018-tym.html)

ksa 29.12.2017 11:07
С новым 2018-тым
 
С новым 2018-тым! :dance:
Всем тем, кто еще на работе посвящается... :D

рони 29.12.2017 11:29
:thanks: :victory: :dance:

Nexus 29.12.2017 12:06
С наступающим :)

laimas 29.12.2017 12:53
Цитата:
Сообщение от ksa
Всем тем, кто еще на работе посвящается...
А кто нет в старом пусть живут? :)

ksa 29.12.2017 14:15
Цитата:
Сообщение от laimas
А кто нет в старом пусть живут?
Ага. :yes:
Им пока праздновать рано... :D

void() 30.12.2017 10:49 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>С НГ</title>
</head>
<body>

	<div class="wrapper">
		<div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active6"></div><div class="lamp active1"></div><div class="lamp active2"></div><div class="lamp active3"></div><div class="lamp active4"></div><div class="lamp active5"></div><div class="lamp active5"></div>
		<h1>С Новым Годом! :)</h1>
	</div>

	<script>
		window.onload = function(){
			var items = document.querySelectorAll('.lamp');
			function active(){
				var x = mtRand(1, 7);
				this.classList.remove("active1", "active2", "active3", "active4", "active5", "active6");
				this.classList.toggle('active' + x);
			}
			setInterval(function(){
				var rand = mtRand(0, items.length - 1);
				active.call(items[rand]);
			}, 15);
		}
		function mtRand(min, max){
			return Math.floor(Math.random() * (max - min +1));
		}
	</script>

	<style>
	body{background:#333}
	.wrapper{width:640px; margin: 0 auto; color: gold; text-align: center;}
	.lamp{width:15px; height:15px; float:left; margin:10px; border-radius:25px 8px; background:#8bc34a}
	.active1{background:#ff0000; box-shadow:0px 0px 19px 0px rgba(255,0,0,1)}
	.active2{background:yellow; box-shadow:0px 0px 19px 0px rgba(255,200,0,1)}
	.active3{background:#006cff; box-shadow:0px 0px 9px 0px rgba(0,160,255,1)}
	.active4{background:#02fa0c; box-shadow:0px 0px 19px 0px rgba(50,255,0,1)}
	.active5{background:gold; box-shadow:0px 0px 19px 0px rgba(255,130,0,1)}
	.active6{background:#ff04d5; box-shadow:0px 0px 19px 0px rgba(250,50 250,1)}
</style>
</body>
</html>

рони 30.12.2017 13:46
новогодняя гирлянда
 
:) дубль-мини
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color:#333;
  }

  .lamp{
    width:15px;
    height:15px;
    float:left;
    margin:10px;
    border-radius:25px 8px;
    transition:all .3s ease-in;
    box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
  }


  .wrapper{
    width:640px;
    margin:0 auto;
    color:gold;
    text-align:center;
  }
  </style>

  <script>
    window.addEventListener("DOMContentLoaded", function() {
  var a = document.querySelectorAll(".lamp"), b = "#ff0000 #006cff #02fa0c #ff04d5 #ffff00 #ffd700".split(" ");
  (function e() {
    var c = b[Math.random() * b.length | 0], f = .3 < Math.random(), d = a[Math.random() * a.length | 0].style;
    d.backgroundColor = c;
    d.boxShadow = f ? "0px 0px 15px 0px " + c : "";
    window.setTimeout(e, 20);
  })();
});
  </script>
</head>

<body>


<div class="wrapper"> <h1>С Новым Годом! :)</h1>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
    <div class="lamp"></div>
</div>

</body>

</html>

laimas 30.12.2017 15:13
void(),
рони,
а елка где?

void() 30.12.2017 18:15
рони,
круто:write:

laimas,
:lol: 
<!DOCTYPE html>
<html  lang="en">
<head>
	<meta charset="UTF-8">
	<title>С НГ</title>
</head>
<body>
	<script>
		window.addEventListener("DOMContentLoaded", function() {
			var a = document.querySelectorAll(".lamp"), b = "#ff0000 #006cff #02fa0c #ff04d5 #ffff00 #ffd700".split(" ");
			(function e() {
				var c = b[Math.random() * b.length | 0], f = .3 < Math.random(), d = a[Math.random() * a.length | 0].style;
				d.backgroundColor = c;
				d.boxShadow = f ? "0px 0px 15px 0px " + c : "";
				window.setTimeout(e, 20);
			})();
		});
	</script>

	<h1>С Новым Годом!  :) <br>	 2❄18	</h1>
		<div class="background wrapper"></div>
	<div class="wrapper">	
		<div id="star">	★</div>
		<div class="lamps lamps1">
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
		</div>
		<div class="lamps lamps2">
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
		</div>
		<div class="lamps lamps3">
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
			<div class="lamp"></div>
		</div>
		<div id="triangle-up"></div>
		<div class="conteiner">	
			<div class="round"></div>
		</div>
	</div>

	<style>
	body{
		background-color: #333;
		text-align: center;
	}
	.wrapper{
		width: 300px;	
		margin: 10px auto;
		text-align: center;
		position: absolute;
		left: 50%;
		top:100px;
		margin-left:-160px;
	}
	#triangle-up {
		width: 0;
		height: 0;
		border-left: 150px solid transparent;
		border-right: 150px solid transparent;
		border-bottom: 300px solid GREEN;

	}
	.conteiner{
		overflow: hidden;
	}
	#star{
		font-size: 50px;
		color: red;
		display: inline-block;
	}

	.background {
		width: 400px;
		height: 500px;
		background-color: #444;
		border-radius: 50%;
		box-shadow: 0 0 150px 150px #444;
		top:50px;
	}
	.round{
		width: 300px;	
		height: 120px;	
		border-radius: 50%;
		background-color: green;
		margin-top:-60px;
	}
	h1{
		z-index: 999;
		position: relative;
		color: gold;
	}
	.lamp{
		width:15px;
		height:15px;
		float:left;
		margin:10px;
		border-radius:25px 8px;
		transition:all .3s ease-in;
		box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
	}

		.lamps {
		z-index: 999;
		width: 50px;
		position: absolute;
		margin-left: 60px;
		margin-top: 0px;
	}

	.lamps1 {
		transform: rotate(26deg);
		z-index: 999;
		margin-left: 65px;
		margin-top: 0px;
	}
	.lamps2 {
		margin-left: 130px;
		margin-top: 30px;
	}

	.lamps3 {
    transform: rotate(-27deg);
    margin-left: 200px;
    margin-top: -10px;
	}
</style>

</body>
</html>

laimas 30.12.2017 18:19
Осталось рони добавить табурет и можно стишки читать. :)

Добавить высоту тегу [html] надо, а то красоту елочки не видно. )

laimas 30.12.2017 18:29
void(),
маловато будет )

рони 30.12.2017 20:40
:dance: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    background-color:#333;
  }

  .lamp{
    display: inline-block;
    width:15px;
    height:15px;
    margin:10px;
    border-radius:25px 8px;
    transition:all 180ms ease-in;
    box-shadow:0px 0px 8px 0px rgba(255, 255, 255, 1);
     background-color: transparent;
     transform: scale(1);
  }


  .wrapper{
    width:640px;
    margin:0 auto;
    color:gold;
    text-align:center;

  }



  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
  function h(e) {
    e && "background-color" == e.propertyName && (b[a].style.transform = "",
    (a = ++a % b.length) && a % c || (d = f(), c += ++g, !a && (c = g = 1)),
    b[a].style.backgroundColor = d,
    b[a].style.transform = "scale(1.5)");
  }
  function f() {
    return "#" + ("000000" + (16777215 * Math.random() | 0).toString(16)).slice(-6);
  }
  var b = document.querySelectorAll(".lamp"), d = f(), a = 0, c = 1, g = 1;
  [].forEach.call(b, function(a, b) {
    a.addEventListener("transitionend", h, !1);
  });
  window.setTimeout(function() {
    b[a].style.backgroundColor = d;
  }, 50);
});
  </script>
</head>

<body>


<div class="wrapper">
    <h1>С Новым Годом! :)</h1>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span><br>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
    <span class="lamp"></span>
</div>

</body>

</html>

nerv_ 31.12.2017 23:33
Хочу поздравить с наступающем всех бородатых дядек этого форума.
А кто без бороды, отрастит небольшую и тоже быть поздравленым :)

Vlasenko Fedor 02.01.2018 12:57
С наступившим Новым годом!!!
Удачных всем проектов и хорошего настроения!!!
:victory: :dance: :victory:

ksa 03.01.2018 10:17
Всем, кто уже на работе - вы не одиноки! :victory:

Отдыхающим - хорошего отдыха. :D

cyber 09.01.2018 02:20
С наступившим Новым годом!!!
Только закончил отмечать :D

ksa 09.01.2018 08:56
Цитата:
Сообщение от cyber
Только закончил отмечать
Вливайся. :victory:

j0hnik 13.01.2018 04:25
фига се вы тут куралесили! :victory:
Кто на новый год бухал???


Часовой пояс GMT +3, время: 21:30.