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>
Related
I am trying to center an image on to a Hexagon made using CSS.
The code I currently have is:
.img-social {
width: 25px;
height: 25px;
}
.hexagon {
position: relative;
width: 35px;
height: 20.21px;
background-color: #525555;
margin: 10.10px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 17.5px solid transparent;
border-right: 17.5px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 10.10px solid #525555;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 10.10px solid #525555;
}
<li class="img-social-container">
<div class="hexagon"></div>
<a><img class="img-social" src="icons/logo-github.png" alt="github"></a>
</li>
I also want the image to be ontop of the hexagon which is another problem I am having.
Just move it? I'm somewhat sure it's not the best solution, but still.
.img-social {
width: 25px;
height: 25px;
position: relative;
bottom: 32.5px;
left: 5px;
margin: 0;
}
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.
I would like to design a border like below picture. But I am running out of ideas about how to do it.
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
THank you in advance.
Luckily with CSS you have access to two pseudo elements on every container. I added the Asterix to one of the pseudo elements :after and the line to another :before.
For example:
.fancy-underline {
position: relative;
display: inline-block;
}
.fancy-underline:before {
content: '';
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
height: 1px;
background: grey;
}
.fancy-underline:after {
content: '*';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
}
<h2 class="fancy-underline">About Me</h2>
try this out:
<div class="about-me">
<h2>About Me</h2>
<p>*</p>
</div>
css:
div.about-me{
width: 100%;
text-align: center;
}
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
p {
font-size: 50px;
transform: translatey(-72px);
}
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
I have a design with this effect
I dont care about the font styles or any details, all i am focused right now is on the creating the frame and if possible the button as well. Does anyone know how to do this kind of effect in css?
Here is my very basic html/css code, wont even be of any help. And you can completely modify it if it suits better. BTW i am using bootstrap 3.
/******** The html *********/
<div class="col-md-12 bg-img">
<div>Italy has never been so close</div>
</div>
/******** The css *********/
.bg-img {
display: table;
width: 100%;
height: 100px;
text-align: center;
background: #999 url("http://p1.pichost.me/i/15/1380265.jpg") no-repeat fixed center;
}
.bg-img div {
display: table-cell;
vertical-align: middle;
width:10px;
font-weight:700;
}
I am using a generic image, as it shouldn't make any difference. Here is the fiddle.
https://jsfiddle.net/3aL4xnr8/
You can do this with :after and :before pseudo-elements.
div {
display: table;
margin: 0 auto;
width: 30%;
padding: 20px;
position: relative;
height: 200px;
}
p {
display: table-cell;
vertical-align: middle;
font-size: 40px;
}
div:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
border-top: 1px solid black;
border-left: 1px solid black;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 30%;
height: 50%;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
<div>
<p>Lorem ipsum dolor sit amet.</p>
<button>Button</button>
</div>