Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
CSS Articles
Page 6 of 130
How to switch between dark and light mode with CSS and JavaScript?\\n
To switch between dark and light mode with JavaScript, the code is as follows −Example body { padding: 25px; background-color: white; color: black; font-size: 25px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .dark-mode { background-color: black; color: white; } .toggleButton { padding: 12px; font-size: 18px; border: 2px solid green; } Toggle Dark/Light Mode Example Toggle dark mode Click the above button to toggle dark mode document .querySelector(".toggleButton") .addEventListener("click", toggleDarKMode); function toggleDarKMode() { var element = document.body; element.classList.toggle("dark-mode"); } OutputThe above code will produce the following output −On clicking the “Toggle dark mode” button −
Read MoreHow to create a browser window example with CSS?
To create a browser window example with CSS, the code is as follows −Example body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .menuBar { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .menuRow { padding: 10px; background: #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .browserField { float: left; } ...
Read MoreHow to create a custom scrollbar with CSS?
To create a custom scrollbar with CSS, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; height: 200vh; /*to create a scrollbar*/ } ::-webkit-scrollbar { width: 20px; } p { font-size: 40px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: rgb(75, 22, 161); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { ...
Read MoreCreating a Navigation Menu using CSS Image Sprite
Image sprite is used to reduce the number of http requests that makes our site’s load time faster.Following is the code for creating a navigation menu using CSS image sprite −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; } span { width: 200px; height: 300px; background-color: black; } nav { background-color: black; height: 50px; padding-top: 15px; padding-left: 10px; } nav a { font-size: 20px; color: white; text-decoration: none; margin-right: 10px; } .home { width: 32px; height: 32px; ...
Read MoreHow to create CSS3 Transition Effects?
To create CSS3 Transition Effects, use the transition property. Following is the code for creating transition effects using CSS3 −Example .container div { width: 300px; height: 100px; background: rgb(25, 0, 255); border: 2px solid red; transition: width 2s; } .container:hover div { width: 100px; } Transition effects example Hover over the above div to reduce its width OutputThe above code will produce the following output −On hovering above the div −
Read MoreAdvanced Selectors in CSS
The Advanced Selectors in CSS includes Adjacent Sibling selector, attribute selector, direct child selector, nth-of-type selector, etc. It also includes General Sibling Selector, an example is shown below:h1 ~ h3Example of direct child selector −div > spanFollowing is the code showing advanced selectors in CSS −Example #red { color: red; } .green { background: green; } ul:nth-of-type(1) { background: rgb(0, 174, 255); } ul + h3 { border: 4px solid rgb(19, 0, 128); } a[href="https://www.wikipedia.org"] { font-size: 25px; } h1 ~ h3 { font-size: 40px; } div > span { background-color: ...
Read MoreHow to create a chat message with CSS?
To create a chat message with CSS, the code is as follows −Example body { margin: 0 auto; max-width: 800px; padding: 0 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .message { font-size: 18px; font-weight:500; border: 2px solid #dedede; background-color: #55e4a8; color:rgb(0, 0, 0); border-radius: 12px; padding: 10px; margin: 10px 0; } .darker { ...
Read MoreHow to create a mixed column layout grid with CSS?
To create a mixed column layout grid with CSS, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .col { width: 50%; } } @media screen and (max-width: 600px) { .col { width: 100%; } } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −
Read MoreHow to create a list grid view with CSS and JavaScript?
To create a list grid view, the code is as follows −Example * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; color: white; } /* Clear floats after the columns */ .row:after { content: ""; display: table; ...
Read MoreHow to create a Menu Icon with CSS?
To create a Menu Icon with CSS, the code is as follows −Example div { width: 40px; height: 7px; background-color: blue; margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −
Read More