I'm trying to make a webkit button with linear background along with an icon with the help of ::before element but it does not worked out. Is there any possible way to do the same?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="bar2">
<div class="nav-items">BOOKS</div>
<div class="nav-items">SONGS</div>
<div class="nav-items">COOK</div>
<div class="nav-items">GAMES</div>
<div class="nav-items">Recents</div>
</div>
<style>
.bar2{
display: flex;
width: 300px;
overflow-x: overlay;
background: grey;
}
.nav-items{
padding:10px;
}
.bar2::-webkit-scrollbar-track{display: none;}
.bar2::-webkit-scrollbar{background: transparent; height: 30px;}
.bar2::-webkit-scrollbar-button:single-button:horizontal:decrement{
background: url(angle-left.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment{
background: linear-gradient(to left,white,#00000000);
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment::before{
position: absolute;
background: url(angle-right.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-thumb{display: none;}
</style>
</body>
</html>
There's a few unusual things here:
You likely don't need most of these very specific browser prefixes. Browser prefixes should be a last resort for edge-cases related to a browser or engine.
There are no buttons in your example, consider using BOOKS tags instead of the <div>s you're using. If you're using Javasript use <button onclick=""> instead. Changing this will get you all the default browser behaviour that is really cumbersome to write yourself (tabindex, keyboard navigation, ...)
But most important for your question:
When using pseudo elements first thing to set is the content. Pseudo elements will not show without it. (MDN documentation)
So for the pseudo to work on .bar2, something like this should do it:
.bar2::before {
content: '';
display: block;
background: red;
min-width: 1rem;
height:1rem;
}
Related
How can I add an underline to an inline-element in CSS, that is (1.) "stylable" and (2.) at the baseline (unlike solutions using only border-bottom or box-shadow)?
This is for a responsive layout, so the underline has to be able to reach over multiple lines. Also, it cannot displace any other (not underlines) text that might be inline with the link.
This is a mock-up to demonstrate the desired effect.
Thanks in advance!
I think you'd want to use a pseudo element to style your underline. I threw a simple animation too on hover to showcase its flexibility.
h1 {
position: relative;
}
h1::before {
content: "";
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
background: aqua;
height: 2px;
width: 200px;
transition: width 0.3s;
}
h1:hover::before {
width: 300px;
}
<h1>This is a styleable baseline</h1>
I don't know why you aren't able to use border-bottom but try this:
<!DOCTYPE html>
<html>
<style>
</style>
<body>
<a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br>
<a><span style="border-bottom: blue solid 3px;">LINK OVER
<br>MULTIPLE</span> LINES</a><br><br>
<a><span style="text-decoration: underline; text-decoration-color:
blue;">LINK OVER<br>MULTIPLE </span> LINES</a>
</body>
</html>
For everyone interested, this is the solution I came up with. It only works on a solid background.
background: linear-gradient(white, white), linear-gradient(blue, blue);
background-position: 0px calc(1em + 5px), 0px 1em;
background-repeat: repeat-x;
color: black;
background-color: white;
quite simply I want to make an animated tile type button.
I'm not sure what the issue is (probably an outdated server) but css3 properties don't work. (I'm using ie11 so I know they should work on my browser).
below is my code, what isn't working is RGBA or transition (which I believe to be CSS3 attributes, please correct me if I'm wrong)
any help on a workaround would be greatly appreciated, I tried to use modernizr but it just completely bamboozled me.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css">
<style>
.tile{
height: 190px;
width: 190px;
overflow: hidden;
background-repeat: no-repeat;
max-width: 100%;
text-align: center;
vertical-align: middle;
background-size:190px 190px;
}
.caption{
background-color: rgba(0,0,0,0.4);
overflow: hidden;
color: #fff;
font-weight: bold;
margin: 150px 0px 0px 0px;
height: 190px;
width: 190px;
}
.caption:hover {
transition: margin .5s;
margin: 0px 0px 20px 0px;
background-color: rgba(0,0,0,0.4);
cursor: pointer;
}
#description{
overflow: hidden;
margin: 25px 0px 0px 0px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" >
<div class="caption" onclick="alert('test');" >
<p>Some caption</p>
<p id="description">Some lengthy description that may potentially overflow into two lines</p>
</div>`enter code here`
</div>
</body>
</html>
edit::
as per my lower post this is actually due to compatibility mode, this will be forced on the majority of people using the site so does anyone know if a workaround?
Regarding Transparency
The transparency via the background: rbga(...) property appears to be working just as expected in Internet Explorer 11 per your example:
Another option would be to use the CSS opacity property, which functions similar to your use-case, however it just handles the transparency level. It does functiona a bit differently however as it is applied to the targeted element and all children of the element, so it isn't always the most appropriate choice.
opacity: 0.4;
If the transition is the issue...
If you want the transition to appear when you hover out of the element, you'll also need the transition property on your non-hover selector as well :
.caption{
/* Other properties omitted for brevity */
transition: margin .5s;
}
which can be demonstrated below:
Is there something that you are expecting to occur that isn't?
I'm having a problem on img:hover
Here's my jsbin: http://jsbin.com/bereputu/1/edit
My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.
Here's my code:
<html>
<head>
<title>UltraLotus</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/header.png">
</div>
<center>
<div class="nav">
<img src="images/home.jpg">
<img src="images/contact2.jpg">
</div>
</center>
<div class="page">
<p></p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
}
.container {
min-height: 100%;
}
.header {
background-color:#1a1a1a;
width:100%;
height:100px;
}
.header img {
position: relative;
margin-top:-30px;
}
.nav {
position:relative;
width:100%;
height:40px;
top: -15px;
background-image: url("images/nav.jpg");
}
.nav img {
position:relative;
margin-top:13px;
}
.nav a:first-child:hover {
position:relative;
background-image: url('images/home.jpg');
}
.nav a:nth-child(2):hover {
position:relative;
background-image: url('images/contact.jpg');
}
.page {
padding-top:5px;
top:150px;
padding-bottom:70px;
}
.footer {
position:absolute;
bottom: 0;
width:100%;
height:70px;
background-image: url("images/footer.jpg");
}
I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.
For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:
You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.
Note 1: Since they're both the same, you really don't even need the hover styling at all.
Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.
Here's a little CSS to get your started:
.nav a {
color: grey;
font-size: 1.2em;
text-decoration: none;
border: 1px solid grey;
padding: 5px;
padding-bottom: 0px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* I even added in a little hover effect */
.nav a:hover {
background-color: #2C2C2C;
}
Here's your full site design without any images (except your logo):
http://jsbin.com/bereputu/2/
You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS
I have a div that is a link to another page. When someone hovers over the div(ie, link) I want the whole div's background color to go blue. I would like to do this all in CSS because javascript may not work with everyone.
My Problem: My code below attempts to do this, the link works fine BUT when I hover over the div the background doesn't change color. What do you think I am doing wrong & how do you think I can fix this to make the div change background color on hover?
I have a feeling that I should place the link(a element) inside the div(instead of outside) but I can never get the a to stretch to the full space of the div that way.
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }
/* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
.sidebarLink { color: #000000; text-decoration: none; }
.sidebarLink a:hover { background-color: blue; }
/* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
-->
</style>
</head>
<body>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
</body>
</html>
:hover support is not great for non-anchor elements in older browsers and IE, so you can attach the hover psuedo class to the <a> instead and use a simple descendant selector:
a:hover #rentalAnnc { background-color: blue; }
You should put the <a> inside the <div>. If you want it to stretch across the full space, add display: block to its style.
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>We have a range of Education Facilities available for lease and hire</p>
</a>
</div>
a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }
Add <!DOCTYPE html> to top of your page to make it a HTML5 document and use the outcommented #rentalAnnc:hover { background-color: blue; } rule. Having a <div> inside <a> is invalid in HTML3/4, but apparently valid in HTML5 (disclaimer: HTML5 standard is still not definitive). After adding the proper doctype and the outcommented rule, your current problem (and many other (future?) layout-related issues) should be solved in MSIE.
Don't forget to fix the other http://validator.w3.org errors after adding the doctype, such as a missing title and so on. Browser behaviour is undetermined on invalid HTML.
A bit late I'm sure but I've been looking at this recently and I think the better solution is:
<style type="text/css">
body { background-color: RGB(218,238,248); }
#rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
border-width:thin; border-style:solid; border-right-width:thick;
border-bottom-width:thick; width: 300px; }
a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
a.sidebarLink:hover div { background-color: blue; }
</style>
<a class="sidebarLink" href="facilitiesForHire.html">
<div id="rentalAnnc">
<p>We have a range of Education Facilities available for lease & hire</p>
</div>
</a>
Note: the rentalAnnc div does not have a background-color in it's style. This is in the link style only.
This way, the link covers the entire div exactly, not just a part of it. Also, any background-image applied to the div (eg with transparent areas for the background color to show through) will still be displayed!
I have an image that is a link. I want to show a different image when the user hovers over the link.
Currently I'm using this code:
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).
Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.
Help! How can I do this better?
use a class for the link itself and forget the div
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
Be sure to write the quote marks exactly as they are here, or it will not work.
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
That could be done with <a> only:
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
It can be better if you set the a element in this way
display:block;
and then by css sprites set your over background
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
You could do the following, without needing CSS...
<img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.
You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.
<!---->
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>