I'm using the following test code to try create a rhombus type shape. The span is a standard oblong, and the 2 sides will make it appear as a rhombus
**********
* *
******
However, the before and after selectors don't seem to render anything. I'm not sure if I'm doing it wrong or if I'd just be better off positioning them absolutely.
Any ideas?
<style>
span {
width:50px;
height:20px;
color:white;
background-color:red;
padding:10px;
}
span:before {
background: url('left_side.png') left center no-repeat;
height:43px; width:22px;
}
span:after {
background: url('right_side.png') right center no-repeat;
height:43px; width:22px;
}
</style>
<html>
<body>
<span>
Some text goes here
</span>
</body>
</html>
#demo { border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px; }
do it without images why people made css3
Demo : http://jsfiddle.net/sahilpopli/dRyLg/
The content property is mandatory, even if left empty :
span:before {
content : "";
display:inline-block;
background: url('left_side.png') left center no-repeat;
height:43px; width:22px;
}
span:after {
content : "";
display:inline-block;
background: url('right_side.png') right center no-repeat;
height:43px; width:22px;
}
Edit : added display:inline-block; for dimension properties to actually work with span, see this example http://jsfiddle.net/3nvhb/
Try this:
span:before {
content: url('left_side.png');
height:43px; width:22px;
}
span:after {
content: url('right_side.png');
height:43px; width:22px;
}
Related
CODE:
<style>
::-webkit-scrollbar{
width: 23px;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: silver;
}
::-webkit-scrollbar-button {
background-color: transparent;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
</style>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
jsfiddle : https://jsfiddle.net/2zcxnL66/
On that code in chrome, other things about scrollbar is good and nicely working.
But I care some margin of scrollbar.
It looks like there are some margin for top corner or bottom corner of scrollbar track.
Question:
How can I remove these margin? I want to make scrollbar goes top fully as if margin-top_or_bottom-of-scrollbar-track:0;
These aren't margin but the spaces taken by the arrows you made transparent. So instead you can make them display:none :
::-webkit-scrollbar{
width: 23px;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: silver;
}
::-webkit-scrollbar-button {
background-color: transparent;
display:none; /*added this */
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
<body>
<p style="padding-top:0; margin-top:0; text-align:right">
Here is problem --------------------------------->
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p style="padding-top:0; margin-top:0; text-align:right">
Here is problem --------------------------------->
</p>
</body>
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.
I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width: 100px;
height: 75px;
display: block;
}
.Tab1:hover {
border: 1px solid green;
}
<div class="Tab1"></div>
You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).
Also don't forget to center the background image with background-position:center;
.Tab1 {
background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
width:100px;
height:73px;
display:block;
padding:20px;
background-clip:content-box;
}
.Tab1:hover {
border:1px solid green;
}
<div class="Tab1"></div>
If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :
.Tab1 {
background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat: no-repeat;
background-position: center;
background-clip: content-box;
width: 100px;
height: 75px;
display: block;
padding: 50px;
border: 1px solid transparent;
}
.Tab1:hover {
border-color: green;
}
<div class="Tab1"></div>
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-repeat:no-repeat;
background-position:center;
background-clip:content-box;
width:100px;
height:75px;
display:block;
padding:20px;
}
.Tab1:hover{border:1px solid green;}
This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.
Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.
You can check here the space between image and border...
.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
width:100px;
height:75px;
display:block;
padding:15px;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
}
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
</div>
thanks
css code
.Tab1 {
background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
background-position:center;
background-repeat:no-repeat;
width:100px;
height:75px;
display:block;
padding:15px;
}
.Tab1:hover {
border:1px solid green;
margin-left:-1px;
margin-top:-1px;
}
Trying to make arrow link with CSS.
This one works in Firefox, but has a problems in IE and webkit-based browsers with arrowhead's position. Double div used for centering link content. Any suggestions?
content
<a href="#" class="readmore">
<div>
<div>
link content
</div>
</div>
</a>
content
CSS
.readmore {
text-decoration:none;
}
.readmore > div {
display: table;
height: 30px;
//width: 100%;
background: #008a00;
transition: background 0.2s;
}
.readmore > div:hover {
background:orange;
}
.readmore > div::after {
content:"";
display:inline;
position:absolute;
border: 15px solid;
margin-top:-15px;
border-color:transparent transparent transparent #008a00;
transition: border-left-color 0.2s;
}
.readmore > div::before {
content:"";
display:inline-block;
width:6px;
position: static;
background:#008a00;
transition: background 0.2s;
}
.readmore > div:hover::after {
border-left-color:orange;
}
.readmore > div > div {
display: table-cell;
//text-align: center;
vertical-align: middle;
color:white;
}
You should set the top explicitly to 0 for the :after element, and also remember to set the position:relative for the div element so that the absolute positioning works as expected:
.readmore > div::after {
...
top:0;
}
.readmore > div {
...
position:relative;
}
Fiddle
NOTE: The negative margin-top should be removed. The cause of your problem is you use negative margin-top (maybe by trial and error until it looks OK in FF), but the position also depends on the top and left. The default values of these properties are implemented differently by different browsers, the only solution to set it in order is explicitly set the top, left and remember the rule to determine the containing block for the absolute positioned element. (the nearest ancestor which has position as absolute or relative).
Try this code -- >
HTML :
<div>content</div>
Link
<div>content</div>
CSS :
a{
padding:10px;
background:#2ecc71;
display:inline-block;
position:relative;
}
a:hover{
background:orange;
}
a:hover:after{
border-left: 20px solid orange;
}
a:after {
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #2ecc71;
position: absolute;
right:-20px;
top:0;
}
JS FIDDLE DEMO
The border width and the right and top positions can be tweaked according to your needs
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}