I'm trying to draw additional (mock) buttons onto my page with plain CSS, but my span element is not showing up. I've tried giving it a display: block; and I've also tried positioning it absolutely, but nothing seems to work. And out of those two ways, which is the preferred/most clear method?
header {
position: relative;
display: flex;
justify-content: space-around;
border-bottom: 6px solid black;
padding: 15px 0 10px 0;
}
img {
width: 43px;
height: 43px;
}
.red-button {
background: yellow;
width: 50px;
height: 50px;
}
header:before {
content: "";
position: absolute;
z-index: 1;
top: 74px;
width: 100%;
border-bottom: 6px solid maroon;
}
header:after {
content: "";
position: absolute;
top: 0;
width: 100%;
border-bottom: 6px solid $light-red;
}
<body>
<header>
<img src="./assets/pokeball.svg" alt="pokedex">
<span className="red-button"></span>
</header>
</body>
Just try to replace className by class.
Related
I am trying to make a border that connects a horizontal line from the right. The sketch below is how it should look like, and I need ideas on how to create this. Thank you! I would greatly appreciate it on anyone who can help me.
Here is a working example.
#example {
position: relative;
}
#example:before {
content: "";
display: block;
width: 100%;
height: 0px;
position: absolute;
top: 50%;
left: 0px;
border-bottom: solid 1px #999;
}
#example span {
position: relative;
display: inline-block;
padding: 5px;
color: #999;
background: #FFF;
border: solid 1px #999;
}
<div id="example">
<span>LATEST PRODUCTS</span>
</div>
<style type="text/css">
.test {
width: 100%;
height: 50px;
background-color: #F0F;
position: relative;
}
.test:before {
width: 100%;
height: 1px;
left: 0;
top: 50%;
content: "";
background-color: #eee;
position: absolute;
}
</style>
<div class="test"></div>
I'm creating and Angular2 component to achieve the following behavior:
I have an array (strings) in the component named "stepList". This is my view:
<ul class="step">
<li class="step__item selected" *ngFor="let step of stepList">
{{step.label}}
</li>
</ul>
And this is my CSS:
.step{
display: flex;
&__item {
display: block;
padding-left: 25px;
}
}
With the current code, I have the items (names) rendered, but I don't know how to get the line with the circles underneath them.
Thanks in advance!
Use a border-bottom and a pseudo element:
.step{
display: flex;
}
.step__item {
display: block;
position: relative;
padding: 0 12px 25px;
border-bottom: 1px solid lightgray;
}
.step__item::before {
display: block;
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
content: '';
}
<ul class="step">
<li class="step__item selected">
CATEGORIA
</li>
<li class="step__item selected">
ATTRIBUTES
</li>
</ul>
And the SCSS code:
.step{
display: flex;
&__item {
display: block;
position: relative;
padding: 0 12px 25px;
border-bottom: 1px solid lightgray;
&::before {
display: block;
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
content: '';
}
}
}
Padding on the label with a border-bottom to get the line. Create a div with a set height and width (so, for a circle, use the same height and width), forming a square. Add a border-radius of 50% which will make it circular in shape and put the div inside the label. Position absolutely so that it appears over the border-bottom.
http://jsfiddle.net/exjxw7m6/
ul.progress-bar {
height: 300px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden;
&::after {
content: "";
position: absolute;
top:5px;
left:5px;
background: #777;
height: 5px;
width: 100%;
}
li {
background: #000;
border-radius: 100px;
width: 15px;
height: 15px;
z-index: 1;
position: relative;
&.stop ~ li {
background: #777;
&::after {
height: 0;
}
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 5px;
background: #000;
width: 5px;
height: 100vh;
}
}
}
more info here: (credit) Progress bar made of solid line, with dots as steps
I want to drop lined shadow on a link or button. Kind of flat style. You can see this implemented already here
a.button {
position: relative;
z-index: 2;
display: inline-block;
padding: 10px;
text-decoration: none;
color: #fff;
font-family: arial;
}
a.button:before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
right: 0px;
bottom: 0;
border: 3px solid #000;
}
a.button:after {
content: "";
display: block;
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
background-color: red;
border: 3px solid red;
right: -6px;
bottom: -6px;
}
a.button:hover:after {
background-color: green;
border: 3px solid green;
}
Click Here
But the problem is that the box and the shadow are overlapping on the button text so the button text is not visible. Is there any way to fix that? I don't want to add any extra html tags like span into this as the links are going to be auto generated using Wordpress. So that is why I have used before-after pseudo css.
Set :after z-index to -1. to send it backward futher
a.button:after {
z-index: -1;
}
I need when you hover a mouse on one div other div with parametres appear from below and these both divs have common border.
Now I have border only on first div. It looks like first div don't contain second, but in html code div with parametres is beetwen of first.
What is wrong?
.item {
width: 220px;
height: 300px;
margin: 10px 3px;
float: left;
position: relative;
}
.item:hover .item_inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
background: #fff;
box-shadow: 0 1px 14px rgba(0,0,0,0.3);
height: 100%;
}
.item_param {
display: none;
text-align: left;
padding: 0 5px;
margin: 10px 0;
background-color: #f3f3f3;
}
.item_inner{
width: 100%;
height: 100%;
position: relative;
padding-bottom: 5px;
border: 1px solid green;
}
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: absolute;
}
<div class="item">
<div class="item_inner">
TEXT
<div class="item_param">
<p>Parametres</p>
<p>Parametres</p>
<p>Parametres</p>
</div>
</div>
</div>
.item_inner:hover .item_param {
display: block;
top: 100%;
width: 100%;
position: relative;
}
I am trying to achieve the following, with pure CSS and no images:
As you can see, its a heading with a line afterwards. The problem is, that the line should has 2 different colors and more important, 2 different heights.
The first parts color is orange, has a height of 3px and a fixed width of 100px (padding-left: 15px)
The sedond parts color is #E1E1E1 and should fill the rest of the line.
My first try was this:
<h1><span>OUR ARTICLES</span></h1>
<style>
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
border-left: 100px solid orange;
left: 100%;
margin-left: 15px;
}
</style>
See http://jsfiddle.net/oyxmxoLs/
But as you can see, I can't make the orange part thicker than the grey one.
Any ideas?
Another way: Flexbox
With display: flex you don't have to give the line a certain width and you can make sure it is always responsive.
We are going here with an progressive enhancement approach. We'll make a cut after IE8 by using ::before instead of :before. In IE9 only the grey line will be shown (underneath the title).
h1 {
align-items: center;
color: #444;
display: flex;
font: 18px/1.3 sans-serif;
margin: 18px 15px;
white-space: nowrap;
}
h1::before {
background-color: orange;
content: "";
height: 4px;
margin-left: 10px;
order: 2;
width: 100px;
}
h1::after {
background-color: #E1E1E1;
content: "";
display: block;
height: 2px;
order: 3;
width: 100%;
}
<h1>Our articles</h1>
Do not forget to add vendor-prefixes!
You can solve this by using :before and :after
http://jsfiddle.net/oyxmxoLs/1/
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:before {
content: "";
position: absolute;
height: 1px;
top: 45%;
width: 999px;
background: #E1E1E1;
left: 100%;
margin-left: 15px;
}
h1 span:after {
content: "";
position: absolute;
height: 3px;
top: 45%;
width: 100px;
background: orange;
left: 100%;
margin-left: 15px;
margin-top:-1px;
}
<h1><span>OUR ARTICLES</span></h1>
You can also use the :before pseudo-element to add the orange line.
h1 {
overflow: hidden;
}
h1 span {
display: inline-block;
position: relative;
}
h1 span:after, h1 span:before {
content: "";
position: absolute;
height: 1px;
left: 100%;
top: 45%;
margin-left: 15px;
}
h1 span:after {
width: 999px;
background: #E1E1E1;
}
h1 span:before {
height: 3px;
z-index: 1;
margin-top: -1px;
border-radius: 2px;
width: 100px;
background: orange;
}
<h1><span>OUR ARTICLES</span></h1>