I've used the ::before and ::after elements in my CSS class to put a bottom border in my button, but that doesn't seem to work in my case.
I've positioned the ::before element tag as absolute so that the border would be inside the button, but for some reasons the border extends all the way throughout the page instead of just the button.
.mydiv {
background-color: #242128;
border-radius: 0;
height: 1000px;
width: 100%;
}
body {
margin: 0px;
}
.mybtn2 {
border: none;
font-size: 2em;
border-radius: 5px;
cursor: pointer;
color: white;
font-family: Serif;
margin-top: 50px;
margin-left: 5%;
background-color: #242128;
padding: 5px 10px;
}
.mybtn2::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 2px solid white;
}
<body>
<div class="mydiv">
<button class="mybtn2">Hover Me</button>
</div>
</body>
You need position: relative; on .mybtn2.
Related
I have a little mark at the bottom right of my own code snippet page, which should also contain my website's favicon. I want to use ::before for this but I have no clue how to resize the image to stay inside the 1em by 1em pseudo-element.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I want the favicon to be fully visible but shrunk down to 1em by 1em.
I've tried CSS object-fit but it had absolutely null effect on the image no matter what I set it to. overflow: hidden or overflow: clip kinda work but they obviously just cut off what's too much of the image and don't resize the image to fit.
You can set the content to "" and use background-image instead, and set the background-size to 1em.
div#snippet {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(200,200,200,0.3);
}
a#l2020-link {
color: blue;
background-color: lightgrey;
position: absolute;
bottom: 10px;
right: 10px;
border: 0px solid grey;
border-radius: 3px;
padding: 3px;
display: flex;
flex-direcion: row;
}
a#l2020-link::before {
content:"";
background-image: url(https://www.lampe2020.de/favicon.ico);
width: 1em;
height: 1em;
background-size:1em;
display: inline-block;
}
<div id="snippet">
<!-- Imagine the code inputs and the iFrame to show the result here -->
Lampe2020.de
</div>
I'm currently designing a website based on this bootstrap theme (https://blackrockdigital.github.io/startbootstrap-freelancer/). I like what he's done with the hr styling (see code below), but I really want to use it against a background that isn't a plain colour, i.e. a background image.
The problem with this is that when changing the star icon background-color property to transparent (i.e. not the same colour as the background), the hr line still remains beneath.
Example image . If anyone can come up with a simple way of achieving the same effect against a non-plain background, I'd be really grateful!
hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: solid 5px;
border-color: #2C3E50;
}
hr.star-primary:after {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 0.25em;
content: '\f005';
color: #2C3E50;
background-color: white;
}
I don't think you can do what you're asking with a single element. I would suggest creating a div with a span inside for the icon, and then using the :before and :after pseudo elements to create two horizontal lines, either side of the star.
body {
background-color: #f00;
}
.hr {
overflow: hidden;
position: relative;
text-align: center;
}
.hr::before, .hr::after {
background-color: white;
content: '';
display: inline-block;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.hr::before {
left: calc(50% + 30px);
}
.hr::after {
right: calc(50% + 30px);
}
.hr .icon {
background-color: transparent;
color: white;
display: inline-block;
font-family: FontAwesome;
font-size: 2em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="hr">
<span class="icon fa fa-star"></span>
</div>
Change pseudo element :after to :before
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/bootstrap/css/bootstrap.min.css" type="text/css"/>
<link href="https://blackrockdigital.github.io/startbootstrap-freelancer/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
hr.star-primary {
max-width: 250px;
margin: 25px auto 30px;
padding: 0;
text-align: center;
border: none;
border-top: #2C3E50 solid 5px;
color: #2C3E50
}
hr.star-primary:before {
font-family: FontAwesome;
font-size: 2em;
position: relative;
top: -.8em;
display: inline-block;
padding: 0 .25em;
content: '\f005';
color: #2C3E50
}
</style>
<hr class="star-primary" />
Sample Output
Hope this helps!
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/
I have an MVC application which requires nice rounded buttons and to work on IE7.
I have found some code to style anchor tags so as to make them look like nice buttons.
Unfortunately, they seem to be totally outside of the tabbing order (I can't navigate to those controls by pressing tab). On some screens I can fix this by adding tabindex to all of the controls on the form, but unfortunately it is not possible to do this on all screens (for instance I sometimes use partial views).
Note tabbing to the controls also doesn't work in FireFox.
My "buttons" are placed like so:
<a class="btn green" id="Submit">Save</a>
There is some javascript, which adds some and tags to this class to allow it to have rounded corners, so the anchor tags are converted to this:
<a class="btn green" id="Submit"><i></i><span><i></i><span></span>Save</span></a>
and they are styled with the following css:
.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(images/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px; top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
a.btn {color: #333;text-decoration: none; font-weight:bold; font-family: Arial; font-size: 12px; }
* html .btn span,
* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }
.btn.green { background: rgb(175,211,86); }
.btn:hover { background-color: #FFF; }
.btn:focus { background-color: #FFF; }
.btnFocus { background-color: #FFF !important; }
.btn:active { background-color: #444; }
.btn[class] { background-image: url(images/shade.png); background-position: bottom; }
* html .btn { border: 3px double #aaa; }
* html .btn.green { border-color: #9d4; }
* html .btn:hover { border-color: #a00; }
Ah, just figured it out.
It works fine if we add an href attribute to the anchor tags
<a class="btn green" id="Submit" href="#">Save</a>
Sorry to trouble everyone.
I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.
How can this be achieved using CSS?
Update: I am talking about the cross-bar in the first image that says "snapshot" and "WP Advanced Code Editor"!
Try this - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
My demo can be seen here http://dabblet.com/gist/3152262
I have an image wrapper with overflow:hidden and I've simply used a :before pseudo-element which I've rotated and absolutely positioned. Same idea for the horizontal one.
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}