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);
}
Related
I am trying to draw a 3D-Box with HTML/CSS and for some reason, the lines I add have some weird shadowing/3D-effect themselves:
My only attempt to solve the issue was to google it because my HTML skills are very limited but could not find anything of help.
This is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: white;
}
header {
background: white;
padding: 0px;
}
.outerDiv {
margin-top: 0px;
margin-left: 7vw;
position: relative;
height: 90vh;
width: 90vw;
border: 1.1px solid red;
}
.box {
position: absolute;
border: 1px solid black;
font-family: "IBM Plex Sans";
}
.backbox {
top: -20px;
left: -20px;
width: 100%;
height: 100%;
z-index: -1;
}
.frontbox {
top: 7vh;
left: 7vw;
padding: 20px;
background-color: white;
}
.diagonal {
width: 28.3px;
height: 1px;
position: absolute;
transform: rotate(45deg);
transform-origin: 20% 40%;
}
.diagonal_left {
top: -16px;
left: calc(100% - 22px);
}
.diagonal_right {
top: 83%;
left: -21%;
}
<div class="header"></div>
<div class="outerDiv">
<div class="box frontbox">
<hr class="diagonal diagonal_left">
<hr class="diagonal diagonal_right">
<p>hi</p>
<div class="box backbox">
</div>
</div>
</div>
Thanks in advance!
This is happening because for hr elements, the border-style is set to inset by default. Just add this to your css, to get the expected result:
hr {
border: none;
border-top: 1px solid black;
}
This will set the border style to solid (which is the default for div elements), and show the border only for one edge.
How would I go about making this in CSS3/HTML5?
The Red background is the background of the div. The inner white is another div that will contain some text.
Since you already have 2 containers, you can use two pairs of pseudo elements for the corners, like this:
.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}
.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}
.outer::before, .outer::after, .inner::before, .inner::after {
content: '';
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
How can I do something like the picture below?
I would like to have an extra thick line to all my h1's but am not quite sure of a best practice to do it.
HTML:
<h1>This is Our Work</h1>
CSS:
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
}
h1:after {
content: "";
display: block;
border: 1px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
}
Codepen:
You don't need any pseudo elements in this case.
You can draw multiple background images with css3 linear-gradient() with precisely controlled size and positions:
h1 {
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-repeat: no-repeat;
background-size: 100% 1px, 50px 3px;
background-position: bottom 2px left, bottom 1px center;
}
h1{
background-image: linear-gradient(to right, #246cb4, #246cb4),
linear-gradient(to right, #246cb4, #246cb4);
background-size: 100% 1px, 50px 3px;
background-repeat: no-repeat;
background-position: bottom 2px left, bottom 1px center;
position: relative;
display: inline-block;
}
<h1>This is Our Work</h1>
You need to add position:relative to the h1 and set margin:0 auto to h1:after
h1 {
border-bottom: 1px solid #0D6CC4;
display: inline-block;
position:relative;
}
h1:after {
content: "";
display: block;
border: 2px solid #0D6CC4;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left:0 ;
bottom:-2px;
margin:0 auto;
}
<h1>This is Our Work</h1>
Try this just with a few tweaks in styling related to position.
h1{
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
border: 2px solid black;
width: 50px;
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: -1.5px;
}
<h1>This is Our Work</h1>
used this css
h1:after {
content: "";
display: block;
border: 3px solid black;
width: 50px;
margin-top: 0px;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
bottom: -3px;
}
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
You need to position element :after and :before
.main-title{
text-align: center;
}
.inner-title{
position: relative;
font-size: 24px;
padding: 0 0 15px;
margin: 0 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
h1:before {
position: absolute;
content: '';
width: 150px;
left: 50%;
margin-left: -75px;
height: 1px;
background: blue;
bottom: 0;
}
h1:after {
position: absolute;
content: '';
width: 50px;
left: 50%;
margin-left: -25px;
height: 3px;
background: blue;
bottom: -1px;
}
<div class="main-title" >
<h1 class="inner-title">Sevices</h1>
</div>
Since you don't know how long every h1 tag will be, i suggest you to translate the element to the center of its parent, like in this example: http://codepen.io/anon/pen/jyMzqN
h1 {
border-bottom: 1px solid #246cb4;
display: inline-block;
position: relative;
}
h1:after {
content: "";
display: block;
position: absolute;
height: 3px;
background-color: black;
width: 50px;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
}
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>