Linkedin Animated Icon

5 September 2019 0

JavaScript Animation Button

https://codepen.io/guldus/pen/OePRZa?editors=0100 https://codepen.io/guldus/pen/OePRZa?editors=0100 Github: HTML <div class="button"> <div class="button_wall"> <div class="button_circle"></div> </div> </div> CSS body{ background-color: #262626; } .button{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .button_wall{ position: relative; top: 20%; left: 20%; display: block; width: 250px; height: 130px; box-sizing: border-box; border-radius: 75px; background: url('https://image.winudf.com/v2/image/Y29tLmJlc3RoZC5tb3JuaW5nX3NjcmVlbl80X3Awb3Y0OTVw/screen-4.jpg?fakeurl=1&type=.jpg'); background-size: cover; transition: 1s; }... Continue Reading →

25 June 2019 0

Moving Tooltip (HTML-CSS-JS)

https://codepen.io/guldus/pen/PvrGxz https://codepen.io/guldus/pen/PvrGxz HTML <div id="box"> <div class="image"></div> <span id="tooltip">Mountain View</span> </div> CSS body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; } #box{ position: relative; } .image{ position: relative; display: block; width: 400px; height: 600px; background-image: url("https://images.pexels.com/photos/2324346/pexels-photo-2324346.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=650&w=940"); background-size: contain; box-shadow: 0px 0px 40px rgba(0,0,0,.50); border-radius: 1rem; } #tooltip{ position: fixed; display: block; opacity: 0; visibility:... Continue Reading →

6 June 2019 0

CSS illusion

https://codepen.io/guldus/pen/mgKmwd https://codepen.io/guldus/pen/mgKmwd HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>page</title> <link rel="stylesheet" type="text/css" href="1.page.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="box"> <div id="box_in"> <div class="line a1"><div class="circle a1"></div></div> <div class="line a2"><div class="circle a2"></div></div> <div class="line a3"><div class="circle a3"></div></div> <div class="line a4"><div class="circle a4"></div></div> <div class="line a5"><div class="circle a5"></div></div>... Continue Reading →

21 April 2019 1

Bootstrap Library System

Overview https://codepen.io/guldus/pen/YMWeLe Github: https://github.com/Furkan-Gulsen/Library-System HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="Free Library System"> <meta name="keywords" content="Library System, Book System"> <meta name="author" content="Codeblogger"> <title>Library System</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--... Continue Reading →

6 April 2019 1