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 5 of 130
How to create a responsive table with CSS?
To create a responsive table with CSS, the code is as follows −Example body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div{ overflow-x: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid rgb(0, 0, 0); } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} Responsive Table Example First Name Last Name marks marks marks marks marks marks marks marks marks marks JACK ROY 50 60 10 20 40 50 10 20 30 40 Evelyn Monroe 24 14 22 44 55 44 11 55 22 33 Joe Anderson 54 22 99 55 91 61 81 11 22 55 OutputThe above code will produce the following output −On resizing the window the scrollbar will appear as follows −
Read MoreHow to create a comparison table with CSS?
To create a responsive table with CSS, the code is as follows −Example table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: center; padding: 16px; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 18px; } th:first-child, td:first-child { text-align: left; } tr:nth-child(even) { background-color: #f2f2f2 } Comparison Table Example Features Basic Pro Free Yes No Customer Support No Yes Validity 1 Year Lifetime Warranty No 5 Years OutputThe above code will produce the following output −
Read MoreHow to create a full screen video background with CSS?
To create a full screen video background with CSS, the code is as follows −Example * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 17px; } .backgroundVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } .content { position: fixed; bottom: 0; ...
Read MoreHow to create a Modal Box with CSS and JavaScript?
To create a modal box with CSS and JavaScript, the code is as follows −Example body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ...
Read MoreHow to create a delete confirmation modal with CSS and JavaScript?
To create a delete confirmation modal with CSS and JavaScript, the code is as follows −Example body { font-family: Arial, Helvetica, sans-serif; } .modal { text-align: center; display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .modalContent { font-size: 20px; ...
Read MoreHow to create a collapsible section with CSS and JavaScript?
To create a collapsible section with CSS and JavaScript, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .collapse { background-color: rgb(83, 186, 255); color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; } .active, .collapse:hover { background-color: rgb(34, 85, 160); } ...
Read MoreHow to create a simple "star rating" look with CSS?
To create a simple star rating look with CSS, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 30px; } .fa { font-size: 30px; color: grey; } .rated { color: rgb(255, 0, 0); border: 2px solid yellow; } Star Rating Example OutputThe above code will produce the following output −
Read MoreHow to create a flip card with CSS?
To create a flip card with CSS, the code is as follows −Example body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin:20px; } .flipCard { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; } .innerCard { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 ...
Read MoreHow to create a gradient background color on scroll with CSS?
To create a gradient background color on scroll, the code is as follows −Example body { height: 250vh; color: white; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient( 141deg, #a47dff 0%, #4e28a7 40%, #22053d 65%, #72a4ff 75% ); } Change Background Gradient on Scroll Example Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos. Scroll to see the effect. OutputThe above code will produce the following output −While scrolling the gradient will shift from dark blue to light blue −
Read MoreHow to create a fixed/sticky header on scroll with CSS and JavaScript?
To create fixed/sticky header on scroll with CSS and JavaScript, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0px; padding: 0px; height: 150vh; /*To produce scroll bar*/ } .header { width: 100%; background-color: rgb(52, 21, 110); color: white; padding: 50px; font-size: 20px; } div.sticky { position: fixed; top: 0; ...
Read More