I have a button that uses a graphic and has rounded corners.
In order to make the button CSS reusable, and able to accommodate any length text whilst still keeping the round corners, I'd like to use :after to add the end rounded corner after the main button (thus the first image/text can grow and the rounded corner will always be tacked on the end.)
Managed to get the :after working when I add content (e.g the words 'test' and some background colours) but cannot get it to work when there is no content on the styling. I just need the background image and that's it.
JSFiddle with the buttons. You can see the :after code but for some reason this doesn't display.
#wizard-nav .paging:after
{
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
When using the ::before and ::after pseudo-selectors you need to set a value to content.
Pseudo elements are also inline elements, so if you want to define a height or width then you must display it as a block element.
For example:
#wizard-nav .paging::after {
content: "";
display: block;
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
Working example: http://tinkerbin.com/GSO0HpD2
You have an alternative for your background-image. You can generate it for example with http://www.colorzilla.com/gradient-editor/ and than applu some border-radius, as much as you like and border, and you have the same effect more quickly than working around a background-image like this. For example:
border:red 1px solid;
border-radius:10px;
And by the way - they didn't appear because of your background-image. Take down your ".
http://jsfiddle.net/WZywh/ here is an example
Related
I'm trying to stick to the Bootstrap design paradigm of container > row > column, but I'm admittedly new to this and curious about something.
If I'm only putting content in the columns, as I believe I'm supposed to do, then Bootstrap's CSS puts a 15px gutter at the left and right edges of the page (I know it also puts them between disparate columns.) For design aesthetics I'd like to put a border above my content, and I'd like to do so without having it run into the gutter space.
Plunk included. As you can see, When I try to style the same element containing the content, it results in the border-top attribute (blue and green colored in my example) running into both gutters. When I create a new element above the content and attribute it with margin-left, margin-right values, that seems to work for the left edge of the border but not for the right one (orange color in my example). I just want the border to line up with my text.
What is the best way to accomplish this? I could change the margins or padding for the element itself but then I feel like I'm messing with Bootstrap's plumbing.
Please check this plunk. I've wrapped the content inside <div class="col-xs-8 opportunity-results"> with a <p> tag and then applied a border-top to that <p> tag. Moreover, I've assigned the property of display: block to the <a> tag inside <div class="col-xs-4 new-search clear-all"> and then applied a border-top to that <a> tag.
If you want to have the border-top only above the text then please check this plunk.
UPDATE:
To make both the blue and the green border-top to touch, you can use the :after psuedo selector on .opportunity-results like this:
.opportunity-results:after {
position: absolute;
content: '';
border-top: 1px solid blue;
width: 100%;
height: 2px;
left: 15px;
top: 0px;
}
Here's the plunk for it.
I am using a custom font from Fontastic to display icons like you see here:
The icons can only be one color plus transparency, in this case the green you see above.
I want, in some circumstances, to display the 'details' of these icons as white - the way I would like to accomplish this is by placing a white background behind the appropriate part of the icon. The desired end-result:
I have tried adding a background color and using 50% border-radius but I get results like this:
and this (got close using display: inline-block on my icon element):
I feel I am having difficulty because the icon element itself is rectangular and centering the circular background behind the icon seems not possible using the knowledge I have of CSS.
I put up a demo of the icons here (sorry it's not at a 'css fiddle-like' website but I was having difficulty setting that up to match my situation): https://hoplu.com/troubleshooting
Any tips? I feel there is probably a css property I'm not aware of that makes this job much easier, but have been unable to pinpoint one.
What I would do is something like this:
hoplu {
position:relative;
}
hoplu:before {
position:relative;
z-index:2;
}
hoplu:after {
content:"";
position:absolute;
z-index:1;
border-radius:50%;
background:white;
left:0;
top:0;
width:75px;
height:75px;
}
This way you're using the :after pseudo-element to generate the white background, and since it has a lower z-index then the :before element (which contains the icon), it will be displayed behind the icon. Change the top, left, width or height of the :after element if needed.
I want to set an image as a background of a heading, but only in the empty area. I do not want to display any background where the heading text is.
So, I have following HTML for heading:
<h2><span>Some text</span></h2>
h2{
background: url("image.png");
}
The problem is that, I do not want to display this heading background in the span, instead I want the span to adapt the background image of the page (parent element). I can not set a specific specific background for the span because it won't match with the page background. So how can I solve this?
You need to coordinate the background position of the image with the text. I'm not sure what your exact layout is, so adjust your values accordingly.
CSS alone cannot detect where your text is, or how bit it is. You need to use JavaScript to do that.
h2 {
background: url(image.png);
background-repeat:no-repeat;
background-position:5px 5px;
padding-left:30px;
}
You can use psuedo element to achieve this,
h1:before
{
content:url(your_img.jpg);
}
I'm trying to create a border that sits INSIDE an image. So, there should be a 10px or so margin from the edge of the photo to where the border is.
Examples of what it should look like: http://imgur.com/a/lMSMR
You can see the page with the photos here: http://blueboxluxe.com/praise/
Anyways, few parts of this is harder to do... 1) the layout is fluid -- the photo size can change. 2) I want the border to show up on all photos -- no matter the size. 3) On the praise page, there's a lot of floats happening; so, things need to work with that correctly.
I've tried playing with box-shadow, but all I get is a border on the outside of the image. Not inside.
Try the outline property and specify a negative offset:
outline:2px solid red;
outline-offset:-15px;
No IE support though!
you can also try a container div
<div><img src=""/></div>
give div a fixed height and width and overflow hidden.
div{height:100px;width:100px;overflow:hidden;border:1px solid black;}
Maybe create a div within the div that contains the image, set it to
position:absolute;
margin:2% auto;
left:2%;
width:96%;
border:solid 1px #fff;
and then give the element that is containing it:
text-align:center;
Alternatively, if the image is floating in a much larger div that contains other elements, put it into a parent div set to the size of the image then put the new div that will add the border underneath or above the image; do not put the image into the div that you want to use as a border; the reason I used percentages is because it should then resize depending on the size of the image.
If you play around with the numbers it should work as you wish.
you can use the box-shadow property in css3. Use a 1px thick box-shadow with a color would give you that effect on almost all browsers.
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
There are two ways that I know of to work around this:
Fake transparency on the containing div by using a transparent PNG as the background image.
Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.
This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:
Non-transparent elements inside transparent elements
use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:
#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}