I m trying to design a both and ribbon shape button on hover should show horizontal line and icon on both ends.
https://imgur.com/a/iYvJUzJ
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
Read More
Hope this will help you get some idea about how to do.
You can add any font icon to the after and before elements of the span inside the content.
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Read More<span></span>
Related
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
i have troubleshooting with hover effects.
I'm working on a welcome webpage.
First i made an item list with HOVER effects :
body {
background-color: #E0105F;
}
.welcome-menu-box{
position: absolute;
right: 10%;
bottom: 10%;
}
.welcome-menu {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
margin: 10px 10px;
width: 80px;
height: 80px;
background: #0D1033;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
color: #fff;
text-align: center;
font-size: 10px;
font-weight: lighter;
letter-spacing: 2px;
transition: 1s box-shadow;
}
.welcome-menu:hover {
box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}
.welcome-menu:hover::before, .welcome-menu:hover::after {
content: '';
position: absolute;
width: 80px;
height: 80px;
background: #10E091;
border-radius: 100px;
z-index: -1;
animation: 1s clockwise infinite;
}
.welcome-menu:hover:after {
background: #EADCB5;
animation: 2s counterclockwise infinite;
}
#keyframes clockwise {
0% {
top: -5px;
left: 0;
}
12% {
top: -2px;
left: 2px;
}
25% {
top: 0;
left: 5px;
}
37% {
top: 2px;
left: 2px;
}
50% {
top: 5px;
left: 0;
}
62% {
top: 2px;
left: -2px;
}
75% {
top: 0;
left: -5px;
}
87% {
top: -2px;
left: -2px;
}
100% {
top: -5px;
left: 0;
}
}
#keyframes counterclockwise {
0% {
top: -5px;
right: 0;
}
12% {
top: -2px;
right: 2px;
}
25% {
top: 0;
right: 5px;
}
37% {
top: 2px;
right: 2px;
}
50% {
top: 5px;
right: 0;
}
62% {
top: 2px;
right: -2px;
}
75% {
top: 0;
right: -5px;
}
87% {
top: -2px;
right: -2px;
}
100% {
top: -5px;
right: 0;
}
}
<container class="welcome-menu-box">
<div class="welcome-menu">ABC</div>
<div class="welcome-menu">ABCD ABCDEF</div>
<div class="welcome-menu">ABCDEFGHIJ</div>
<div class="welcome-menu">ABCDEFGHI</div>
</container>
And I tried to implement it in a specific DIV on a webpage :
/* Div responsive encadrée pleine page avec arrière plan couleur + image png centrée et répétée depuis le centre */
.welcome-menu-box{
position: absolute;
right: 10%;
bottom: 10%;
vertical-align: middle;
}
.welcome-menu {
display: inline-flex;
justify-content: center;
text-align: center;
align-items: center;
position: relative;
margin: 10px 10px;
width: 80px;
height: 80px;
background: #0D1033;
border-radius: 100px;
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 10px;
font-weight: lighter;
letter-spacing: 1px;
transition: 1s box-shadow;
}
.welcome-menu:hover {
box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}
.welcome-menu:hover::before, .welcome-menu:hover::after {
position: absolute;
width: 75px;
height: 75px;
background: #10E091;
border-radius: 100px;
z-index: -1;
animation: 1s clockwise infinite;
}
.welcome-menu:hover:after {
background: #EADCB5;
animation: 2s counterclockwise infinite;
z-index: -1;
}
#keyframes clockwise {
0% {
top: -5px;
left: 0;
}
12% {
top: -2px;
left: 2px;
}
25% {
top: 0;
left: 5px;
}
37% {
top: 2px;
left: 2px;
}
50% {
top: 5px;
left: 0;
}
62% {
top: 2px;
left: -2px;
}
75% {
top: 0;
left: -5px;
}
87% {
top: -2px;
left: -2px;
}
100% {
top: -5px;
left: 0;
}
}
#keyframes counterclockwise {
0% {
top: -5px;
right: 0;
}
12% {
top: -2px;
right: 2px;
}
25% {
top: 0;
right: 5px;
}
37% {
top: 2px;
right: 2px;
}
50% {
top: 5px;
right: 0;
}
62% {
top: 2px;
right: -2px;
}
75% {
top: 0;
right: -5px;
}
87% {
top: -2px;
right: -2px;
}
100% {
top: -5px;
right: 0;
}
}
.encadrement {
background: url('https://www.agence-mibe.com/CODEPEN/GROSMYO-fullresponsive.png') repeat center center fixed, #E0105F;
position: absolute;
top: 0;
left: 0;
border: 75px solid #fff;
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: auto 70%;
}
#media screen and (max-width: 1200px) {
.encadrement {
border: 50px solid #fff;
}
#media screen and (max-width: 768px) {
.encadrement {
border: 25px solid #fff;
background-size: 70% auto;
}
<section class="encadrement">
<container class="welcome-menu-box">
<div class="welcome-menu">ABC</div>
<div class="welcome-menu">ABCD ABCDEFG</div>
<div class="welcome-menu">ABCDEFGHIJ</div>
<div class="welcome-menu">ABCDEFG</div>
</container>
</section>
I have two problems that I'm not able to solve :
• The second item which contains two world has a vertical misalignment due to the occupied space
• The hover effect doesn't work on the web page, but works when alone
If somebody could give me a hint it would be wonderful :-)
I'm creating my own custom product badges and noticed when I rotate -45deg and use before and after there is a space added in Firefox
I originally had the same problem in Chrome but adding transform: translateZ(0); was able to fix it. I tried negative margin and it made the before and after not look as wide as the div at the top.
.product-badge {
color: white;
background-color: #1978AB;
width: 92px;
height: 40px;
line-height: 40px;
top: 27px;
left: 0px;
transform: rotate(-45deg) translateZ(0);
position: absolute;
z-index: 0;
}
.product-badge:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
z-index: 0;
top: 0;
margin-right: 0;
right: 100%;
border-width: 0 0 40px 40px;
border-color: transparent transparent #1978AB transparent;
}
.product-badge:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
z-index: 0;
top: 0;
margin-left: 0;
left: 100%;
border-width: 40px 0 0 40px;
border-color: transparent transparent transparent #1978AB;
}
<div class="product-badge"></div>
JSFiddle link
I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
one of my website have a custom shape footer, is this possible to do purely in css? im going to apply this in a bootstrap container-fluid, so the shape should stretch to the container-fluid.
Thanks in advance!
FOOTER SCREENSHOT
UPDATED FOOTER
1.The Html code:
<div class="footer-outer">
<span class="footer-arrow"></span> <!-- This is for the top part of the background -->
<span class="footer-circle"></span> <!-- This is for the circle -->
<div class="footer-inner">
</div>
</div>
2.The CSS code:
body { padding: 0; margin: 0; }
.footer-outer { margin-top: 150px; height: 200px; background: #415061; position: relative; }
.footer-arrow { width: 0; height: 0; border-style: solid; border-width: 0 200px 100px 200px; border-color: transparent transparent #415061 transparent; position: absolute; top: -100px; left: 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle { position: absolute; left: 50%; border-radius: 50%; margin-left: -40px; top: -140px; width: 80px; height: 80px; background: #eee; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-inner { height: 300px; top: -100px; left: 0; right: 0; position: absolute; }
3.The jQuery code:
$(document).ready(function() {
stretchArrow();
});
$(window).resize(function(){
stretchArrow();
});
function stretchArrow(){
_width = Math.floor($(window).width() / 2);
$('.footer-arrow').css('border-width', '0 ' + _width + 'px 100px ' + _width + 'px');
}
4.If you want the arrow to be pointing down:
Change this CSS:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
With this one:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 28px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 2px solid #415061; border-right: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 20px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
Here is a working example: https://jsfiddle.net/874zxr6h/
And a working example for the arrow pointing down: https://jsfiddle.net/874zxr6h/1/
I have two boxes one on top and one on left.
I'm using :after attribute to add line (border) after div.
First thing I want to do is to "join" both red borders.Right now there is empty gap between them, but if I change #toolbar::after left to '15px' I get that unwanted green line between red lines - can this be fixed?
Another thing is hovering over sidebar. After I move mouse cursor over sidebar it is moving to left:0, but border around toolbar isn't moving. Can I modify toolbar border after I hover over sidebar?
Below is sample code that illustrates my problem
html {
background: #e6e6e6;
}
#sidebar, #toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content:'';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content:'';
right: 0;
height: 4px;
position: absolute;
left: 20px;
bottom: 0;
display: block;
border-bottom: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="toolbar"></div>
<div id="sidebar"></div>
You can use box-shadow instead of a border box-shadow: 5px 1px 0px 0px green;
Note :- I have changed the html structure for the pseudo element to move to left when hovered on sidebar
html {
background: #e6e6e6;
}
#sidebar,
#toolbar {
position: fixed;
top: 0;
left: 0;
}
#toolbar {
z-index: 102;
height: 50px;
right: 0;
text-shadow: 0 -1px 0 #000000;
background: #222222;
}
#sidebar {
z-index: 103;
bottom: 0;
width: 80px;
margin-top: 50px;
background: black;
left: -60px;
transition: all 0.2s ease;
transform: translateZ(0);
}
#sidebar:hover {
left: 0;
}
#sidebar::after {
content: '';
bottom: 0;
width: 4px;
position: absolute;
right: 0px;
top: 0;
display: block;
border-right: 1px solid green;
background: red;
-webkit-box-sizing: initial;
;
}
#toolbar::after {
content: '';
right: 0;
height: 4px;
position: absolute;
left: 15px;
bottom: 0;
display: block;
background: red;
-webkit-box-sizing: initial;
box-shadow: 5px 1px 0px 0px green;
transition: all 0.2s ease;
}
#sidebar:hover + #toolbar::after {
left: 75px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="sidebar"></div>
<div id="toolbar"></div>