CSS - Keep transformed :after element on target - html

I've got an issue with menu styling.
Menu looks like this:
And each element is styled as follows:
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:hover:after {
content: " ";
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%,0%);
top: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
In this way i can achieve such effect:
Still i'm having serious issues making this triangle stay there after a click. Creating jQuery handlers adding classes seems not to work at all since the new class overwrites navi buttons. Have tried playing with :target but without luck. Any ideas?
EDIT:
Added a fiddle: https://jsfiddle.net/a7zs3z6o/

Add a tabindex to each gallery-navi-element element:
<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>
That will allow them to be focused when clicked.
You'll then want to remove the default outline that appears on focused elements, which you can do with:
.gallery-navi-element:focus {
outline: none;
}
Updated Fiddle

Instead of changing the navi links' class, just add a new .hover class that has the same styles as :hover. Then you won't have a problem with lots of overwriting styles.
You would probably have less trouble doing this if you simplified the CSS to only include the transitioned styles in the hover state/added-class state.
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
Note that the only reason for the border-top-width transition is so that your triangle doesn't cover up the bottom of the Y in the first couple links.
Example:
var navLinks = document.getElementsByClassName('gallery-navi-element');
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].addEventListener('click', function(){
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].classList.remove('hover');
}
this.classList.add('hover');
}, false);
}
.gallery-navi {
border-radius: 28px;
width: 950px;
height: 55px;
background-color: rgb(74, 125, 51);
margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
margin: 0 auto;
width: 870px;
}
.gallery-navi-separator {
width: 2px;
background-color: rgba(255, 255, 255, 0.2);
height: 36px;
float: left;
margin-top: 10px;
}
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
<div class="gallery-navi">
<div class="gallery-navi-wrapper">
<div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
</div>
</div>

Related

I tried making a styled checkbox but only works when i use Position: absolute in css but the problem is, it makes it should move when scrolling scroll

I tried making a styled checkbox but only works when i use Position: absolute in css but the problem is that it makes it should move with the screen when scrolling instead of staying in one place like a regular checkbox The code is down bellow with the HTML "AND" the CSS
i really appreciate you trying to help if you did
When i change the positioning the checkbox gets squished and hideous looking
background-color: #f3f3f3;
}
.bg-container {
top: 20%;
width: 100%;
}
#_checkbox {
display: none;
}
label {
position: absolute;
top: 7rem;
right: 0px;
left: 0px;
width: 20px;
height: 20px;
margin: 0 auto;
background-color: #f72414;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 0 7px 10px #ffbeb8;
cursor: crosshair;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
border: 2px solid rgba(0, 0, 0, 0.44);
}
label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 10px;
height: 10px;
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: inset 0 7px 10px #ffbeb8;
transition: 0.2s ease width, 0.2s ease height;
}
label:hover:before {
width: 1px;
height: 1px;
box-shadow: inset 0 7px 10px #ff9d96;
}
label:active {
transform: translateY(-50%) scale(0.9);
}
#_checkbox:checked + label {
background-color: #07d410;
box-shadow: 0 7px 10px #92ff97;
}
#_checkbox:checked + label:before {
width: 0;
height: 0;
}
<form>
<input type="checkbox" id="_checkbox">
<label for="_checkbox">
<div id="tick_mark"></div>
</label>
</form>

Trying to create button using arrow

I am trying to create a button with an arrow same as the below image:
But when I do that using the below code it looks like this:
My Code:
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url(../img/image-left.svg);
position: absolute;
left: -15px;
top: 23%;
/*background: #fff;*/
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<a class="ms-btn" href="">LEARN MORE</a>
Hope to see any solution for it using css. so button borders can cut or something..
Add to you code the background-color for the 'svg' and adjust the position top. that was it.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -15px;
top: 15%;
background: #fff;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>
Use clip-path to cut the border. I have added 2 CSS variables to control the cut area:
.ms-btn {
--s: 15px;
--b: 10px;
display: inline-block;
margin: 50px;
color: #3E5B73;
font-size: 12px;
padding: 16px 28px;
position: relative;
transition: 0.3s all linear;
}
/* the border */
.ms-btn:before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #3E5B73;
border-radius: 40px;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--s)),var(--b) calc(50% + var(--s)),var(--b) calc(50% - var(--s)),0 calc(50% - var(--s)));
}
/* the arrow */
.ms-btn:after {
content: "";
position: absolute;
left: -10px;
top: calc(50% - 10px);
background: red;
height: 20px;
width: 20px;
}
<a class="ms-btn" href="">LEARN MORE</a>
The closest style to what you want is that I noted below. I remove left border and reduce top and bottom left border radius. You can increase or decrease them as you want. This arrow doesn't have and doesn't need background color and I think it will solve you problem and meet your need.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border-width: 2px 2px 2px 0px;
border-color: #3E5B73;
border-style: solid;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 20px 40px 40px 20px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -25px;
top: 15%;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>

CSS3 Set Box Shadow to aslope corner

I'm coding some fancy stuff for teaching myself.
I have an aslope left corner. Now, i want to add the box shadow and it showed like the following image:
This is my code snippet:
html, body {
margin: 0px;
}
.navbar {
position:relative;
content:"";
border-left: 300em solid #454545;
border-bottom: 120px solid transparent;
z-index: 2;
box-shadow: 0px 8px 23px 4px black;
}
.under-bar {
margin-top: -40px;
background: #851e39;
height: 200px;
opacity: 0.8
}
<html>
<body>
<div class="navbar">
</div>
<div class="under-bar">
</div>
</body>
</html>
Can someone help me to set a box-shadow under the header?
You can use transform: rotate(); instead of the border tricks.
body {
margin: 0;
}
.navbar {
height: 200px;
background-color: #9d4b61;
position: relative;
overflow: hidden;
}
.navbar:before {
content: "";
position: absolute;
left: 0;
top: -50px;
width: 100%;
height: 100px;
box-shadow: 0px 8px 23px 4px #000;
transform: rotate(-1deg);
background-color: #333;
}
.menu {
position: relative;
left: 20px;
top: 20px;
color: #fff;
}
<div class="navbar">
<div class="menu">menu</div>
</div>
You can use a border-radius and transform: scale:
body {
margin: 0;
background: #9d4b61;
}
.navbar {
width: 100%;
height: 50px;
background: #5c5c5c;
border-radius: 0 0 100%/22px 0;
box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
transform: scale(1.1,1);
}
<div class="navbar"></div>
The border-radius: 0 0 100%/22px 0 set a radius in the bottom right corner, which is 100% wide and 22px height, giving the radius a "stretched" look.
The transform: scale(1.1,1) is stretching the entire element, to hide the box-shadow in each side.

CSS: triangle above an dialogue box disappears on setting overflow

I have a dialogue box or a arrow box which should be set to max height of 60%, and all the content inside the box overflows via scroll, this is the markup:
<div class="cart">
hello world
</div>
and here is the css to make a arrow-head on top:
.cart {
position: fixed;
background: #ffffff;
opacity: 1;
box-shadow: 1px 1px 10px;
border-radius: 5px;
margin-left: 74.8%;
width: 300px;
top: 70px;
padding: 13px;
z-index: 20;
text-align: center;
display: none;
max-height: 60%;
overflow: auto;
}
.cart:after, .cart:before {
top: -20px;
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.cart:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.cart:before {
border-color: rgba(12, 143, 176, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
if I remove the "overflow" property the arrow head shows up, but when I use it, which I have to It disappears, I want both, an arrow head and scrollable div, but I think the arrowhead just gets inside the scroll. is there any solution for this?
Thanks for the help

Responsive arrow progress bar with transparent borders

I am trying to build a progress bar as seen often within checkouts.
The problem is, that the borders between the arrows are transparent and the whole thing should be responsive.
I got it this far:
http://codepen.io/MrBambule/pen/rVBeoz
But I can't figure out how to get the items of the bar to span the whole width of the parent container (red border in the pen) and stay responsive.
I think I could figure it out with JS but I'd rather have a CSS solution.
Help would be much appreciated.
HTML
<ul class="progress-nav">
<li class="active">
<span>1. FOO</span>
</li>
<li>
<span>2. BAR</span>
</li>
<li>
<span>3. BAZ</span>
</li>
</ul>
CSS
$bar-color: rgba(255, 255, 255, 0.2);
$bar-active-color: rgba(255, 255, 255, 0.6);
$arrow-size: 22px;
body {
background: linear-gradient(left, #803689, #5eb6e4);
}
.progress-nav {
position: relative;
font-size: 0;
margin: 100px auto;
width: 80%;
max-width: 900px;
// dummy border to display the width problem
border: 1px solid red;
li {
position: relative;
color: #fff;
font-size: 12px;
display: inline-block;
width: 20%;
margin-right: 48px;
list-style: none;
background: $bar-color;
padding: $arrow-size 0;
transition: background .5s, color .5s;
span {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-33px) translateY(-35%);
}
&:before,
&:after {
content: '';
position: absolute;
display: block;
top: 0;
transition: all .5s;
}
&:before {
border: $arrow-size solid $bar-color;
border-left-color: transparent;
left: -$arrow-size*2;
}
&:after {
border: $arrow-size solid transparent;
border-left-color: $bar-color;
right: -$arrow-size*2;
}
&:first-child:before {
border: none;
width: $arrow-size*2;
height: $arrow-size*2;
background: $bar-color;
border-radius: 4px 0 0 4px;
}
&:last-child:after {
border: none;
right: -$arrow-size;
width: $arrow-size;
height: $arrow-size*2;
background: $bar-color;
border-radius: 0 4px 4px 0;
}
&.active,
&:hover {
background: $bar-active-color;
color: #000;
&:before {
border-color: $bar-active-color;
border-left-color: transparent;
}
&:after {
border-left-color: $bar-active-color;
}
&:first-child:before,
&:last-child:after {
background: $bar-active-color;
}
}
}
}
you could use something like:
.wrap {
width: 100%;
height: 30px;
z-index:-2;white-space: nowrap;
overflow:hidden;
}
.wrap div:first-child{margin-left:-2%;}
.progress {
margin:0;
margin-left:0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index:-1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
which is responsive to the width of the screen.
It makes use of the transform:skew property for the middle bars, and a small border hack for the two far elements. This results in the output shown below:
Result
NOTE
If you are creating these dynamically (and want them all along the same line), then you will need to alter the width stated in the first css rule (currently set to 23%).