I made a horizontal progress bar that does not have a problem with it
But the progress bar's vertical lines are not correct.
I put a picture of the problem.
jsfiddle.net/post98/juGXZ/1/
HTML
<body>
<div class="progress-bar horizontale">
<div class="inner"><span>|||||||</span></div>
</div>
<div class="progress-bar verticale">
<div class="inner"><span>___ ___ ___ ___ ___</span></div>
</div>
</body>
CSS
body {
background: url('https://www.dropbox.com/s/8g7pf7ig7fw5e0v/main_bg.png') repeat;
}
.progress-bar.verticale {
width: 24px;
height: 300px;
/*border: 1px solid #060707;*/
margin: 10px auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
transform: rotate(180deg);
display: inline-block;
}
.progress-bar.horizontale {
width: 300px;
height: 24px;
/*border: 1px solid #060707;*/
margin: auto;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 0 3px #000000 inset, 0 0 2px rgba(255,255,255,0.1);
border-radius: 10px;
padding: 4px;
display: inline-block;
}
.progress-bar.horizontale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 24px;
width: 200px;
}
.progress-bar.horizontale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/40px sans-serif ;
letter-spacing: -6px;
height: 24px;
opacity: 0.06;
overflow: hidden;
transform: skewX(-30deg);
}
.progress-bar.verticale .inner {
background: linear-gradient(#FFCC33, #CC9900);
border-radius: 12px;
position: absolute;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 1px #000000;
height: 200px;
width: 24px;
}
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 20px/30px sans-serif ;
letter-spacing: -6px;
height: 200px;
width: 20px;
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
}
Here the Picture
You can make the lines thick by replacing the underscores _ by a thick character like this one: ▀
A demo.
Edit:
ASCII code of the character: 223 (Top half block).
You can thicken the lines like this:
.progress-bar.verticale .inner span {
background: repeat scroll 0 0 #999999;
position: absolute;
font: bold 120px/30px sans-serif ; //thicken lines to same width as horizontal progress bar.
letter-spacing: -6px;
height: 200px;
width: 25px; //change width to fit width of div.
opacity: 0.06;
overflow: hidden;
transform: skewY(30deg);
margin:0px 0px 0px 0px;
bottom: 35px; //Position revision to justify font resizing.
}
Related
Currently I have a HTML & CSS that results in a page like below
However, I want the shadows above B & C tabs so that it looks like they are behind.
Can anyone hele achieve this?
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
You need to temper with the z-index of the different elements. Remember you can only modify the z-index if the element itself has a position set (e.g. position: relative)
Below is a working example. Note that I have also added an "active" class to the currently active tab.
You would need to create JavaScript to make it full functional, but this is the starting point.
Good luck!
body {
background-color: rgb(245, 165, 61);
--border-rad: 5px;
}
.wrapper {
width: 80vh;
margin: 5%;
}
.tabs {
display: flex;
justify-content: space-around;
}
.tab {
position: relative;
width: 20%;
color: #000;
background-color: #fff;
margin: 2px 2px 0% 2px;
border-top-left-radius: var(--border-rad);
border-top-right-radius: var(--border-rad);
position: relative;
text-decoration: none;
text-align: center;
}
.tab.active {
z-index: 2;
}
.tab:before,
.tab:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.tab:before {
left: -20px;
border-radius: 0 0 var(--border-rad) 0;
box-shadow: var(--border-rad) 0 0 0 #fff;
}
.tab:after {
right: -20px;
border-radius: 0 0 0 var(--border-rad);
box-shadow: calc(var(--border-rad) * -1) 0 0 0 #fff;
}
.content {
position: relative;
z-index: 1;
background-color: #fff;
height: 75vh;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 -3px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
text-align: center;
}
<div class="wrapper">
<div class="tabs">
<span class="tab active">A</span>
<span class="tab">B</span>
<span class="tab">C</span>
</div>
<div class="content">content</div>
</div>
Just add these to your content and tab css classes:
.content {
position: relative;
z-index: 2;
}
.tab
z-index: 1;
}
Edit: you need the relative positioning for z-index to work.
You can always try the following css witch will give the box the black shadow and the border bottom you want.
box-shadow: rgb(0 0 0 / 25%) 0px 54px 55px, rgb(0 0 0 / 12%) 0px -12px 30px, rgb(0 0 0 / 12%) 0px 4px 6px, rgb(0 0 0 / 17%) 0px 12px 13px, rgb(0 0 0 / 5%) 0px -3px 5px;
border-bottom: solid;
border-width: thin;
z-index: 50;
I'm trying to remove the ring around a material icon that I'm using as a close icon on a draggable element.
Here's a picture of the element (I've changed the background to red for you to highlight the problem), I want to remove the red outer circle so the nice border of the element goes all the way to the edge of the grey circle:
Here's the HTML and CSS for the element and the icon:
HTML:
<div class="print-element">
Tag Number
<mat-icon class="resize-circle">highlight_off</mat-icon>
</div>
CSS:
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle{
position: absolute;
top: -10px;
right: -10px;
background-color: white;
border: .1px solid white;
border-radius: 50%;
color: #aaa;
cursor: pointer;
}
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
Now I can change the size of the mat-icon, but that results in the below:
using:
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 20px;
width: 20px;
}
yields:
Here's a stackblitz all set up and ready to go: https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss
Here's what I want it to look like:
Even pointers in the right direction would help.
Check edited URL for the changes in HTML and CSS
https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss
Ok here is an answer. I used #Srinivas Bendkhale answer to reach this result.
what I did was wrapping the icon with a span and give it a fix hight and width then all I had to do was to hide the overflow .
That's how it looks in my browser.
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: .1px solid white;
color: #aaa;
cursor: pointer;
}
span {
width: 20px;
height: 20px;
background: white;
position: absolute;
top: -7px;
border-radius: 50%;
right: -7px;
overflow: hidden;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="print-element">
Tag Number
<span><i class="material-icons resize-circle">highlight_off</i></span>
</div>
Is there a way to realize the following kind of shadow with CSS only?
So far I only managed to draw the shadow around the complete box without the recess around the inactive tab:
The Code Here
HTML:
<div class="box">
<div class="tabs">
<span class="tab active">Bild</span>
<span class="tab">Text</span>
</div>
<div class="content"></div>
</div>
CSS:
.box {
width: 200px;
height: 250px;
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin: 16px;
}
.tabs {
height: 30px;
}
.tab {
display: inline-block;
width: calc(50% - 2px);
height: 30px;
text-align: center;
line-height: 30px;
}
.tab:not(.active) {
/* Should be removed in the final solution with correct shadows... */
background-color: rgba(0, 0, 0, 0.18);
}
The solution doesn't need to take care of legacy browsers (< IE 10).
Thanks
Use This CSS
.tab.active {
box-shadow: 0 -5px 2.5px 2px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 99999;
}
.tab {
background: #fff none repeat scroll 0 0;
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
width: calc(50% - 2px);
}
.content {
box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18);
margin-top: 0;
min-height: 50px;
position: relative;
z-index: 999;
}
Edit Your CSS
.box {
- Remove this-
/*box-shadow: 0 0 2.5px 2px rgba(0, 0, 0, 0.18); */
height: 250px;
margin: 16px;
width: 200px;
}
This is what i have got so far
After after checking out tutorial
I want know how curved effect is generated on divs the only question that i found near to what i was looking for was At here at stackoverlow but that too dint help
How folded edge effect is created on as in the above picture
Css
#MenuShape{
height:50px;
background-color:orange;
width:200px;
position:relative;
text-align:center;
left:100px;
}
#MenuShape:after{
content:"";
position: absolute;
width: 0;
height: 0;
left:200px;
border-top: 50px solid transparent;
border-left: 100px solid orange;
border-bottom: 0px solid transparent;
}
#MenuShape:before{
content:"";
position: absolute;
width: 0;
height: -50;
left:-100px;
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 0px solid transparent;
}
HTML
<div id="MenuShape" >
sachin
</div>
https://css-tricks.com/ this the site on inspecting it i found its span wrapped
anchor tag along with svg tag
<a href="/" class="home">
<svg viewBox="0 0 100 25" class="shape-tab">
<use xlink:href="#shape-tab"></use>
</svg>
<span>Blog</span></a>
Click here to see the unexpected behaviour it works fine in codepen
Here is a final demo (archived) on the folded corners:
and the following code is how you can create them:
.note {
position: relative;
width: 30%;
padding: 1em 1.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
/* Firefox 3.0 damage limitation */
display: block;
width: 0;
}
.note.rounded {
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
.note.rounded:before {
border-width: 8px;
border-color: #fff #fff transparent transparent;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}
<div class="note"></div>
To create a curved wave effect you can use this code:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
To achieve the curve you’ll need to inverse where it starts. Follow the same demo, just reverse your values.
See a live demonstration (archived) of how border radius can create the shapes and effects you want and adjust each corner to see it in action.
Im creating a ribbon using css. the page it is on is FOUND HERE
I know the rest of my page needs more work but right this second I am focusing on the ribbon.
I need it to be auto 90% and center no matter what the screen size. at the moment it is cut off on the left a little and not center.
my css code:
.ribbon {
width: 90%;
position: absolute;
text-align: center;
font-size: 15px!important;
background: #2cdb1c;
background: -webkit-gradient(linear, left top, left bottom, from(#2cdb1c), to(#618028));
background: -webkit-linear-gradient(top, #2cdb1c, #618028);
background: -moz-linear-gradient(top, #2cdb1c, #618028);
background: -ms-linear-gradient(top, #2cdb1c, #618028);
background: -o-linear-gradient(top, #2cdb1c, #618028);
background-image: -ms-linear-gradient(top, #2cdb1c 0%, #618028 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 23px!important;
color: #000000;
text-shadow: #b9c9b5 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #379c27;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
-webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #000000 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
Can someone please help me? thank you.
It can't be positioned as absolute. Remove that. Make sure its parent has 100% width and then set margin:0 auto;
You could put your entire ribbon inside a divide. Then instead of centering the ribbon just give it a width of 100%.
ribbon_divide {
margin: 0 auto;
width: 90%;
}
You should wrap ribbon element and set width=100% for ribbon.
.ribbon-wrapper {
position: relative;
width: 90%;
margin: 0 auto;
}
.ribbon {
width: 100%
}
<div class="ribbon-wrapper">
<!-- Your ribbon html code -->
</div>
Just wrap your ribbon with a div.
<div style="width:90%;margin:0 auto;">
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Xclo.mobi</h1></strong><div class="ribbon-stitches-bottom"></div></div>
</div>
You could actually center it based on percentage and absolutely:
.ribbon {
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
}