CSS Box Shadow on Left and Right Only For Tab UI

Developer
Ken Lane
Size
2,502 Kb
Views
18,216
  1. CSS Box Shadow on Left and Right Only For Tab UI Previews
  2. CSS Box Shadow on Left and Right Only For Tab UI HTML Codes
  3. CSS Box Shadow on Left and Right Only For Tab UI CSS Codes
  4. CSS Box Shadow on Left and Right Only For Tab UI JS Codes

How do I make an css box shadow on left and right only for tab ui?

What is a css box shadow on left and right only for tab ui? How do you make a css box shadow on left and right only for tab ui? This script and codes were developed by Ken Lane on 25 October 2022, Tuesday.

CSS Box Shadow on Left and Right Only For Tab UI Previews
IQ Test

CSS Box Shadow on Left and Right Only For Tab UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Box Shadow on Left and Right Only For Tab UI</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='top'> <div class='bar'> <div class='space'></div> <div class='tab'></div> <div class='space'></div> <div class='space'></div> <div class='tab on'></div> <div class='space'></div> <div class='space'></div> <div class='tab'></div> <div class='space'></div> <div class='space'></div> <div class='tab'></div> <div class='space'></div> <div class='space' style='width:200px;'></div> </div>
</div>
<div class='main'></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Box Shadow on Left and Right Only For Tab UI - Script Codes CSS Codes

body { background: #eee; padding: 0; margin: 0;
}
.top { padding-top: 4px; background: white;
}
.top .bar .space { display: inline-block; border-bottom: 1px solid rgba(0, 0, 0, 0.3); width: 10px; margin-right: -4px; margin-bottom: -4px;
}
.top .bar .tab { margin-bottom: -4px; padding: 0; display: inline-block; width: 100px; height: 50px; border-top: 1px rgba(0, 0, 0, 0.3) solid; border-right: 1px rgba(0, 0, 0, 0.3) solid; border-left: 1px rgba(0, 0, 0, 0.3) solid; margin-right: -4px; border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
}
.top .bar .button { background: blue; height: 50px;
}
.top .bar .on { background: #eee; box-shadow: -15px 0 12px -15px rgba(0, 0, 0, 0.5) inset, 15px 0 12px -15px rgba(0, 0, 0, 0.5) inset; border: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 0;
}

CSS Box Shadow on Left and Right Only For Tab UI - Script Codes JS Codes

$(".tab").click( function() { $(".tab").removeClass("on"); $(this).addClass("on");
});
CSS Box Shadow on Left and Right Only For Tab UI - Script Codes
CSS Box Shadow on Left and Right Only For Tab UI - Script Codes
Home Page Home
Developer Ken Lane
Username kenlane22
Uploaded October 25, 2022
Rating 3
Size 2,502 Kb
Views 18,216
Do you need developer help for CSS Box Shadow on Left and Right Only For Tab UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ken Lane (kenlane22) Script Codes
Name
Pin Game1
Magnify Linked Page Area
Filter Buttons With Count
Money Buttons
Links in FirePad
Word Array Into Sentences
CSS Tab UI with SVG diagonal lines
Pin Game2
Twinkling Word Cloud React
Pin Game
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!