Ana içeriğe atla

Kayıtlar

Mart, 2019 tarihine ait yayınlar gösteriliyor

APPLE WATCH PURE CSS

HTML div.container   div.watch         div.watch__band.watch__band__top        div.watch__case             div.watch__case--1       div.watch__case--2       div.watch__case__connect       div.watch__case--3         div.watch__hands           div.watch__hands--ring           div.watch__hands--min#min           div.watch__hands--hour#hour           div.watch__hands--sec     div.watch__buttons       div.watch__buttons--dial       div.watch__buttons--button     div.watch__band.watch__band__bottom   div.title Apple Watch Pure CSS     CSS @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); body{   padding:50px 0 0 0;   margin:0; } .container{   display:flex;   justify-content:center;   align-items:center;   height:100vh;   flex-direction:column; } .title{     margin: 80px 0 0 0;   background-color:#999;   background:linear-gradient(to bottom right,#8360c3,#2ebf91);   font-family: 'Roboto Mono', monospace;   font-weight:bold;   padding:1rem 2rem;   color:#e5e5e

FORZA HORİZON MENÜ

HTML .background .container    .container--logo       img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/9abd53b9-dc42-459a-b094-14d064efb37e%20(1).png")    .container--navigation       .item--link.hint lb       .item--link.active home       .item--link horizon life          .item--notification 6       .item--link team adventure       .item--link creative hub       .item--link cars          .item--notification 2       .item--link rivals       .item--link clubs       .item--link marketplace       .item--link.hint rb    .container--top-menu       .container--card-spot.size-1          .container--card.border             .item--card-image(style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/Screen%20Shot%202019-01-03%20at%208.30.53%20PM.png)")              .container--card--text                .item--notification 2                .item--icon #[i.fa.fa-check-circle-o]                .item--card-title #[.text car mastery]            

16 BİT SNAKE GAME

HTML <div id="wrapper">   <!-- Header -->   <h1 class="snake-title">Snake</h1>   <p class="snake-p">Use keyboard arrows or buttons.<br><br>1. Hitting walls is a no-no.<br>2. Don't eat yourself.<br>3. Traveling backwards is a no-no too.<br>4. Everytime you fail it's faster.</p>   <!-- Menu Container --> <br>           <p class="snake-high-score-p">High-score</p>     <p class="snake-high-score">0</p>   <div id="menu-container">     <button class="menu-play-button" onClick="playGame()">Play</button>   </div>   <!-- Game Container -->   <div id="game-container">   <!-- Score -->     <p class="snake-score-p">Score</p>     <p class="snake-score">0</p>   <!-- Canvas, the Game -->   <canvas id="snak

LOADİNG ANİMATİON

HTML  <div class="alfa">         <div class="mov">             <div class="frente">                 <p id="pp">0%</p>             </div>             <div class="tras">             </div>             <div class="meio">             </div>         </div>     </div> CSS @import url('https://fonts.googleapis.com/css?family=Germania+One');         body{             margin:0px;             background-color:#C31049;             overflow-y:hidden;         }              .alfa{             position: absolute ;             top:50%;left:50%;             width:400px;             height:400px;             margin-left:-200px;             margin-top:-200px;                          perspective: 1000px;             transform-style: preserve-3d;         }         .mov{             position: absolute ;             top:0px;left:0px;             width:400px;          

İNSTAGRAM LİKE ANİMATİON

HTML  <div class="device">     <div class="screen">         <input type="checkbox" id="like" />         <label for="like">Like Something</label>         <div class="heart"></div>     </div> </div> CSS $gray-light: #ebebeb; $red: #f45b69; $blue-light: #59c3c3; $nav-width: 22.25rem; * {     box-sizing: border-box; } html, body {     width: 100%;     height: 100%;     background-color: $gray-light;     color: #4e6cba;     display: flex;     justify-content: center;     align-items: center; } .device {     background-color: #fff;     width: 403px;     height: 830px;     border-radius: 58px;     box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.16), 0 16px 25px 0 rgba(0, 0, 0, 0.18),         inset 0 -6px 10px 0 rgba(0, 0, 0, 0.08);     border-radius: 58.64px; } .screen {     background-color: #eef1f8;     position: relative;     overflow: hidden;     width: calc(100% - (18px * 2));     he

HTML YILAN OYUNU

<canvas id="game" width="400" height="400"></canvas> <script> class SnakeGame {   constructor() {     this.canvas = document.getElementById('game');     this.context = this.canvas.getContext('2d');          // Basılan tuşları algılıyoruz:     document.addEventListener('keydown', this.onKeyPress.bind(this));   }   init() {     // Yeni oyun için ilk değer atamaları:     this.positionX = this.positionY = 10;     this.appleX = this.appleY = 5;     this.tailSize = 5;     this.trail = [];     this.gridSize = this.tileCount = 20;     this.velocityX = this.velocityY = 0;     // Oyun döngümüz çalışmaya başlıyor.     // Her saniyede 15 kez çalışacak, yani 15 FPS olacak.     // Üç boyutlu çok daha büyük oyunlar genelde 60 FPS üzerinde çalışıyor.     this.timer = setInterval(this.loop.bind(this), 1000 / 15);   }   reset() {     // Oyun göngüsünü durdur:     clearInterval(this.timer);          // Oyun ile alakalı detayları en b

JAVASCRİPT ÖRNEKLERİ 5

84   < ! doctype html > < html > < head > < meta charset = "utf-8" > < title > Ö rnek < / title > <style> .panel { width : 200px ; margin : auto ; }   .panel input { width : 100% ; height : 30px ; margin : 3px 0 ; background : #ededed ; border : solid 1px #ccc ; }   #sonuc-yaz { margin-top : 10px ; height : 50px ; line-height : 50px ; font-size : 1em ; font-weight : bold ; }   </style> <script> /*sayfa yüklendiğinde aşağıdaki scripti çalıştır*/ window . onload = function ( e ) {   var y1 = document . getElementById ( "y1" ) ; var y2 = document . getElementById ( "y2" ) ; var y3 = document . getElementById ( "y3" ) ; var sonuc = document . getElementById ( "sonuc" ) ; var hesapla = document . getElementById ( "hesapla" ) ; var sonucYaz = document . getElementById ( "sonuc-yaz" ) ;   /*0-100 arasında değilse uyarı ver*/ [ y1 , y2 , y3 ] . forEach (