For some nice links on a website, I'm using the pseudo class a::hover and the pseudo-element a::after:
a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
}
a::hover,
a::after {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
Now this is applied also to images when inserted into a link-element like this:
<img src="source.jpg" />
How can I hide this styling for my images? I don't want them to have this background when hovering...
You can use the sibling trick:
.parent {
width:100px;
height:100px;
padding:50px;
}
.parent:hover {
}
.child {
height:100px;
width:100px;
background:#355E95;
transition:background-color 1s;
position: relative;
top: -200px;
}
.child:hover {
background:#000;
}
.sibling{
position: relative;
width:100px;
height:100px;
padding: 50px;
top: -50px;
left: -50px;
background:#3D6AA2;
transition:background-color 1s;
}
.sibling:hover{
background:#FFF;
transition:background-color 1s;
}
<div class="parent">
<div class="sibling"></div>
<img src="http://www.dunbartutoring.com/wp-content/themes/thesis/rotator/sample-1.jpg" class="child" />
</div>
See this answer: https://stackoverflow.com/a/17924223/586051
Links can have a broad range of specific styles:
a.mylink{border-bottom:2px solid red;}
a #mylink{border-bottom:2px solid green;}
You could try this:
a img::hover, a img::after { /* Empty */ }
You should take a look at the negation feature of CSS (take care of the Browser-Compatibility). Reference
One possible way is to make those anchor tags selectable by adding a specific class and define that this element is not touched by the a::hover.
Another way is to use the selector an the .not-Feature.
Another "dirty" way is to overwrite this behaviour by using "!important".
This example should reset these values to default (initial):
a::hover img,
a::after img {
pointer-events: initial;
-webkit-backface-visibility: initial;
backface-visibility: initial;
-webkit-font-smoothing: initial;
font-smoothing: initial;
}
If not you should be able to do so at the basic element level:
a img {
pointer-events: initial;
-webkit-backface-visibility: initial;
backface-visibility: initial;
-webkit-font-smoothing: initial;
font-smoothing: initial;
}
Related
Is it possible to reproduce this image using only CSS?
I want to apply this to my menu, so the brown background appears on hover instance
I don't know how to do this, I only have;
.menu li a:hover{
display:block;
background:#1a0000;
padding:6px 4px;
}
skew a parent element (li in this example) and inverse skew its child elements:
nav ul {
padding: 0;
display: flex;
list-style: none;
}
nav li {
transition: background 0.3s, color 0.3s;
transform: skew(20deg); /* SKEW */
}
nav li a {
display: block; /* block or inline-block is needed */
text-decoration: none;
padding: 5px 10px;
font: 30px/1 sans-serif;
transform: skew(-20deg); /* UNSKEW */
color: inherit;
}
nav li.active,
nav li:hover {
background: #000;
color: #fff;
}
<nav>
<ul>
<li>Home</li>
<li class="active">Products</li>
<li>Contact</li>
</ul>
</nav>
Here is a fiddle for use across different browsers - I created in a couple of minutes.
Try playing with the arguments, I used :before and :after to do this.
https://jsfiddle.net/DTBAE/
You can use the transform: skew(X, Y) property to achieve this. Creating a skewed outer container, then skew the opposite amount on an inner container to skew the text back to being straight. See this fiddle for example;
http://jsfiddle.net/UZ6HL/4/
From what you have said, I believe this is what you want, if not please clarify when the item should display the background.
.skew {
background: green;
color: #fff;
padding: 50px;
transform: skewX(-7deg);
font-size: 20px;
font-weight: 700;
}
.skew p {
transform: skewX(7deg);
}
<div class="skew">
<p>This is caption</p>
</div>
Here's an example
To have IE support just add -ms-transform: skew(20deg, 0deg); beside all the other transform: skew(20deg, 0deg);s.
NOTE: SPAN is NOT affected by transform CSS functionality, so you will need a DIV or change span to display: block; otherwise they will NOT be affected.
So just put the TEXT inside a separate div and unskew it.
example wrapper div is:
transform: skewx(35deg)
but text div is:
transform: skewx(-35deg);
here is codepen: https://codepen.io/dmitrisan/pen/NWaYEzV
You can use clip-path to make results like these.
For example:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
ul {
display: flex;
width: 100%;
flex-direction: row;
gap: 20px;
background: #000;
padding: 0 10px;
justify-content: flex-end;
}
li {
list-style-type: none;
clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0% 100%);
background: blue;
padding: 10px 50px;
}
a {
color: #fff;
}
<ul>
<li>Home</li>
<li>About</li>
</ul>
You can generate your clip from here and use it in your code.
Here is a working Fiddle for reference
is there a better way to create this style of "underline" through CSS, other than creating a background image for it?
To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!
You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.
Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.
Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
h1 {
position: relative;
display: inline-block;
font-family: Varela Round;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 40px; /* not required, only for demo purpose */
}
h1 span {
color: #efcc4c;
}
h1:before,
h1:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h1:before {
bottom: -11px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
h1:after {
width: 80%;
border-bottom: 1px solid #ddd;
bottom: -10px;
}
<h1>Our <span>Services</span></h1>
Edit: Refactored my code and making the demo more precisee.
Try this
HTML
<div class="text">
<span>our</span>
Services
</div>
CSS
.text{
font-weight:600;
font-size:25px;
color:red;
position: relative;
display:inline-block;
}
.text::after,
.text::before{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
margin:auto;
border-radius:5px;
height:0px;
}
.text::before{
width:100%;
border:1px solid #ccc;
}
.text::after{
width:50%;
border:2px solid red;
bottom:-6px;
}
.text span{
color:#000000;
}
Link for reference
hope this helps..
I always create "divider", like:
<div class='divider'>
<div class='divi-1'></div>
<div class='divi-2'></div>
<div class='divi-3'></div>
</div>
CSS:
.divider{
padding-top:15px; //or other
text-align:center;
display:block; // or column in bootstrap like col-md-12
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
.
.divider .divi-2{
display:inline-block;
height:2px;
width:50px;
background:#000000;
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
}
And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.
Here is a code from W3Schools on how to create a ripple effect button.
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 50%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 15s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
Can someone help me understand the code bit by bit, especially why the padding and margin in the button:after are so highly set and how the zero values in the button:active:after affect the animation?
Any help will be highly appreciated. (I know the basic of padding and margin, but I think that I am not getting the 'after' class and the technique used).
:after is not a class is a pseudo-element that it's used to add content to the content of an element .see here ::after
so it uses that pseudo-element to create a new space with CSS that it's not defined in your initial HTML . it's like making another element inside the button
for eg if you had a structure like this :
.no_pseudo, .with_pseudo {
width:100px;
height:100px;
background:red;
margin:40px 0
}
.likeAfter {
background:blue;
width:50%;
margin:0 auto;
height:100%;}
.with_pseudo {
position:relative;
}
.with_pseudo:after {
content:"";
position:absolute;
background:blue;
width:50%;
margin:0 auto;
height:100%;
lefT:0;
right:0;}
<div class="no_pseudo">
<div class="likeAfter">
</div>
</div>
<div class="with_pseudo">
</div>
as you can see, the :after element can be used just like a child element inside a div. but you can achieve that just by using CSS .you don't have to change the HTML structure.
so this trick is using :after , which has a background: #f1f1f1; and it's positioned under the button ( margin-top:-120% ) . and then, when you click on the button , it has (margin:0 ) that's how this effect is done
also with paddings and opacity.
i would've done it differently :
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
z-index:2;
}
.button:after {
content: "pseudo element >!<";
color:green;
background: #f1f1f1;
display: block;
position: absolute;
bottom:0;
left:0;
height:0%;
width:0%;
opacity: 0;
transition: all 3s;
}
.button:focus:after {
width:50%;
height:100%;
opacity: 1;
}
<button class="button">
I AM A BUTTON
</button>
i positioned the :after at the bottom-left of the button , with width:0%;height:0%;opacity:0 ;
then, when i click on the button, i added width:50%;height:100%;opacity:1 on the :after and that's how you get that effect . maybe is not exactly the same as in your example but it works.
also added some content:"" to the :after element. you can add text,images etc. almost anything. but if you don't want to add anything, you must use content:"" and leave it empty, otherwise the :after is not created.
:before is the same as after > see here more about pseudo elements
css_pseudo_elements or here Pseudo-elements
there is much to talk about this things, but i hope you kind of understood what's going on with the pseudo-elements and with this effect. let me know. cheers !
EDIT AFTER COMMENT :
1. ' transition backwards ' is because of the :active state ( :active ) . the button has the :active state only when you click on it . after that it's not active anymore and :after goes back to it's original style
and because it has transition:15s it takes 15 sec to get back to it's original position and color.
the same with the ripple effect. you click on the button, the effects starts , :after gets from one style to another , for example from opacity:0 to opacity:1 then because the button doesn't have :active state anymore, :after returns to it's original style of opacity:0 , all this happens in 15 seconds ( because of the transition:15s )
2
content:"" inserts the space for the :after or :before into the HTML structure
you need content:"" on :after because , as i said in the beginning ,
::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is
key word content . so even if you don't insert text or images but you just want to insert an empty space , you need to set up a content:"" which means empty but still there .
elem:after{content:""} generates a space with width:0;height:0 after the element.
i will make two short examples , one with something inside content:"" one with nothing inside it
h1:before {
content:"i am before < < < ";
font-size:14px;
color:red;
}
h1:after {
content:" > > > i am after";
font-size:14px;
color:blue;
}
h2:before {
content:"";
background:red;
width:20px;
height:20px;
position:absolute;
}
h2:after {
content:"";
background:blue;
width:20px;
height:20px;
position:absolute;
}
<h1>Text Before me </h1>
<h2>Just empty content </h2>
http://codepen.io/anon/pen/wBaGgW
I currently have what a list of items and then a button next to them on the right:
The tooltip must appear on focus and the tooltip must appear on hover - this works but the problem is that when an item is focused (after clicking on it) - the following item cannot be accessed via mouse (because preceeding is item focused!):
The tooltip must disappear when the mouse over the tooltip itself, but the focus is forcing it stay.
The test-case is here: http://codepen.io/anon/pen/wBaGgW
can anyone offer a solution that does not have any javascript? Also, the html markup cannot be changed too much. Minimal changes to HTML are OK. Just trying to prevent too much as I'll most likely need to compensate other parts of the application to fit the html changes.
Here shows the tooltip:
button:hover>.tooltip,
button:focus>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
I can hide the tooltip doing the following:
button:focus>.tooltip:hover {
visibility: hidden;
opacity: 0;
}
But that causes a crazy flickering effect as the mouse moves within the area in which the tooltip would appear.
Keep in mind the restrictions:
No JavaScript
Compatibility with IE8+ (please note, the tooltip css is coming from our global module, and I dont have direct access to change it, I am working on a separate module that I can of course override because my css loads after the global css does)
Tooltip must appear below (unfortunately)
With those restrictions, I don't know of any way to resolve your issue perfectly.
As a workaround, you can change the tooltip to be a sibling of the button, instead of a child and use the CSS adjacent sibling selector. This makes it so that when a user clicks the tooltip, it loses focus from the button and the tooltip is hidden. This will require you to fix the position of the tooltip a little (I used margin-top as a quick fix).
Code
button:hover + .tooltip,
button:focus + .tooltip,
button:active + .tooltip {
visibility: visible;
opacity: 1;
margin-top:20px;
}
<ul>
<li><span>Lorem Ipsum Dlar Set</span>
<button>X
</button>
<span class="tooltip">Hello ToolTip
</span>
</li>
...
</ul>
Live example: http://codepen.io/anon/pen/azONYP
Based my answer on this: Answer
html
<button tooltip="Tooltip text">Test</buttoN>
css
[tooltip]:before {
position : absolute;
content : attr(tooltip);
pacity : 0;
}
[tooltip]:hover:before {
opacity : 1;
margin-top:10px;
}
Here is the Fiddle
Update
Fiddle now with focus.
Added pointer event: none;
IE8 YEP YEP
No Javascript YEP
Must be below YEP
when mouse leave the tooltip, it's needs to be removed completely? (like removing the ":focus")...beacuse if it's allow for the tooltip to be visible again after mouse leave so you can use:
button:focus>.tooltip:hover
{
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
text-indent: -9999px;
}
codepen: http://codepen.io/anon/pen/OPVNaW
Use <a> instead of buttons and style them as buttons.
/* `border-box`... ALL THE THINGS! */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 64px auto;
text-align: center;
font-size: 100%;
max-width: 640px;
width: 94%;
}
a:hover {
text-decoration: none;
}
header,
.demo,
.demo p {
margin: 4em 0;
text-align: center;
}
/**
* Tooltip Styles
*/
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
top: 150%;
left: 50%;
margin-top: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
top: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-bottom: 5px solid #000;
border-bottom: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Show tooltip content on focus */
[data-tooltip]:focus:before,
[data-tooltip]:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>CSS Simple Tooltip</h1>
<div class="demo">
<p>I’m a button with a tooltip</p>
</div>
Try refactoring your CSS to something like this:
button:hover>.tooltip,
button:active>.tooltip {
visibility: visible;
opacity: 1;
}
button:focus>.tooltip {
visibility: visible;
opacity: 1;
outline: none;
}
Is it possible to have one CSS class reference another? Instead of rewriting all the css code again?
For example, I have this:
.btn{
/* Whatever btn related styles I have */
}
.btn:hover{
box-shadow:0 0 4px black;
}
.btn:active{
/* This is where I want to reference the '.red' class */
}
.red{
/* There is a LOT of CSS code here for cross browser gradients */
}
The thing is, I'm already using the .red class as is in certain places, and I'd also like to apply the same gradient style to the 'active' state of all elements with the .btn class...
If you can help solve (it need not be the way I've requested it) this, I'd greatly appreciate it...
You can't actually do a reference (one of CSS's major failings), but you can do this:
.btn:active, .red {
/* Block A: Most (or all) of what used to just be in .red below */
}
.btn:active {
/* Block B: Stuff *just* for .btn:active, if any */
}
.red {
/* Block C: Stuff *just* for .red, if any */
}
The comma means that the definitions in the body of Block A apply separately to each of those selectors, and so they apply to any ".btn" elements that are ":active", and separately apply to any ".red" elements.
Block B and Block C are optional. They're for any definitions you only want to apply to the given selector. You usually list these after Block A because rules of equal specificity are applied top-to-bottom, so you can override anything from Block A that you want to in Block B or Block C, and those blocks will "win".
For call class to another class.
.classA{
}
.classB .classA:hover{
visibility: visible;
/*classA -> onmouseover , classB -> visible*/
}
classB{
visibility: hidden;
}
Sample code show popUp onmouseover
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup:hover .popuptext{
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
/*onmouseover .popup class .popuptext is visible*/
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup">over me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup! </span>
</div>
</body>
</html>