CSS - Specific Outline [duplicate] - html

This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 6 years ago.
I would like to create an specific outline for a box using css.
Something like this image:
Please, any help? :(

You can look at gradients, background-clip and background-size:
example possible http://codepen.io/gc-nomade/pen/aZbrEQ
div {
margin: 1em auto;
width: 600px;
max-width: 70%;
padding: 40px;
/* set offset here for border corners */
background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom right no-repeat, linear-gradient(white, white) bottom right no-repeat, rgba(255, 255, 255, 0.15);
/* color receive
background-clip:content-box;
so it is not drawn on padding areas */
background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, content-box;
background-size: 2px 60px, 80px 2px;
/* here give length and thickness of border corners */
color: white;
}
p,
h2 {
padding: 1em;
margin:0;
}
html {
height: 100%;
background: url(http://lorempixel.com/640/480/nature/6);
background-size: cover
}
body {
min-height: 100%;
background: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4em;
}
<div>
<h2>title</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>

Just to prove how simple your question is.
::before and ::after hides parts of the border.
z-index for overlay.
.dirt {
position: relative;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: rgba(251, 145, 156, 1);
border: 2px solid rgba(231, 0, 0, 1);
box-sizing: border-box;
}
.dirt > span {
position: relative;
z-index: 15;
background-color: rgba(255,255,255,0.5);
padding: 25px;
}
.dirt::after,
.dirt::before {
content: '';
position: absolute;
background-color: rgba(251, 145, 156, 1);
/*same color*/
}
.dirt::before {
top: 20%;
bottom: 20%;
left: -2px;
/*border-width*/
right: -2px;
/*border-width*/
}
.dirt::after {
top: -2px;
/*border-width*/
bottom: -2px;
/*border-width*/
left: 20%;
right: 20%;
}
<p>An example: (do not use)</p>
<div class="dirt">
<span>My little dirt text</span>
</div>

Related

Scroll shows above css textarea

I've created a <textarea> of a fixed size that allows users to scroll within it. The problem is that for some reason the scroll displays above rather than below and inside the edges.
textarea {
width: 40%;
min-width: 40%;
max-width: 40%;
min-height: 120px;
max-height: 120px;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
Any ideas how to make the scroll bars behave more properly? There's also the issue with padding on the right changing when there's a scroll bar visible.
PS: This isn't a duplicate of Rounded corners on a textarea with a scrollbar from six years ago. The question doesn't have any answers that approach the issue I'm facing. Nesting within a DIV isn't something that works effectively within the form element. I just wish to have the scroll bar below the border-radius.
Just to be absolutely clear, I'm looking to do something like this (created in Photoshop as an example)
How about using a container for your textarea and applying border to that?
.textarea-container {
width: 250px;
height: 300px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
padding: 0;
overflow: hidden;
}
textarea {
width: 100%;
height: 100%;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
border: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<div class="textarea-container">
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>
Edit: After checking your ideal appearance I realized you want the overflow of the scrollbar to be hidden, so you can define overflow: hidden on textarea container and get rid of padding by setting it to padding: 0
The initial answer from M.A Shahbazi came closest to solving the question and then did. The answer from Artur helped too. Some of the CSS in that answer is off because you come into an issue with the <textarea> not having the same height as its container. Below is the CSS I settled on for anyone who comes across this question in the future and would like to see the final approach. I accepted the answer from M.A Shahbazi because it was closest and needed only a few adjustments. The main ones being the actual sizing, they needed to all have the same size in order to match up. And look more like this:
than this:
.textarea-container {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
margin-bottom: 10px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
background-origin: border-box;
background-clip: padding-box, border-box;
border: solid 5px transparent;
border-radius: 30px;
padding: 0;
overflow: hidden;
}
textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 200px;
padding: 15px;
resize: none;
display: inline-block;
outline: none;
border: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
<div class="textarea-container">
<textarea></textarea>
</div>
textarea {
width: 40%;
min-width: 40%;
max-width: 40%;
min-height: 120px;
max-height: 120px;
padding: 10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
}
.box-content {
height: 120px;
width: 40%;
overflow: auto;
border-radius: 29px;
}
div.disabled {
overflow-x: hidden; //horizontal
overflow-y: scroll; //vertical
}
You can also customize your scrollbar
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
Just wrap your textarea within a div and give some style on into div. Also remove the rows attribute from the textarea. To see the result check my codepen link here.
div {
border: solid 5px transparent;
border-radius: 30px;
width: 40%;
min-width: 40%;
max-width: 40%;
height:120px;
box-sizing: border-box;
max-height:120px;
background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
overflow:hidden;
}
textarea {
height:100%;
width:100%;
padding:10px;
resize: none;
display: inline-block;
outline: none;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
border:none;
}
I think the only solution would be to wrap your textarea in container and apply your styles on the container:
div {
width: 40%;
min-height: 120px;
max-height: 120px;
padding: 20px;
display: inline-block;
outline: none;
box-sizing: border-box;
border: solid 5px transparent;
border-radius: 30px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
background-origin: border-box;
background-clip: padding-box, border-box;
font-family: 'Roboto', sans-serif;
font-size: 15px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
position: absolute;
}
textarea {
position: relative;
flex: 1 0 auto;
margin: -20px;
padding: 20px;
width: 100%;
resize: none;
}
<div>
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>

Word-wrap text in overlay

I have the following issue where I don't really know on how to word-wrap the overlay text to my desires. I want the text to cut-off at the bottom of the overlay (or a few pixels above the bottom) and I want it to end it with a triple dot, so something like this: eu dolor sed, euismod ...
$('.container').mouseenter (function () {
//alert($(this).find('.soverlay').innerHeight()); //returns 56.8 px
var hgt = 'calc(100% - ' + parseInt($(this).find('.soverlay').innerHeight()+5) + 'px)';
$(this).find('.overlay').css({'height' : hgt});
});
$('.container').mouseleave (function () {
//alert($('.container .soverlay').innerHeight()); //returns 56.8 px
$(this).find('.overlay').css({'height' : '0px'});
});
.container {
position: relative;
width: 50%;
max-width: 250px;
}
.image {
border-radius: 10px;
display: inline-block;
width: 100%;
height: auto;
box-sizing: border-box;
}
.soverlay {
border-radius: 10px 10px 0px 0px;
box-sizing: border-box;
position: absolute;
top: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
overflow: hidden; /* remove on hover-in; add on hover-out*/
white-space: nowrap; /*remove on hover-in; add on hover-out */
text-overflow: ellipsis;
}
.overlay {
border-radius: 0px 0px 10px 10px;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
font-size: 12px;
color: white;
}
.container:hover .overlay {
/* height: calc(100% - 57px); /* change height depending on 'soverlay' height */
border-top: 3px solid yellow;
}
.container:hover .soverlay{
overflow: unset;
white-space: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="soverlay">Some people just have very long names</div>
<div class="overlay">This is a very long job description which doesn't really fit in this div. Now the question is how do I cut of the text at the bottom of the overlay. </br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit convallis ligula, eget sollicitudin dolor lobortis ut. Duis venenatis, est vel volutpat dictum, magna mi pellentesque dolor, eu suscipit ligula augue eleifend justo. Nunc eleifend diam velit, id maximus eros tristique et. Donec sagittis mattis velit. Morbi gravida tincidunt metus in suscipit. Curabitur pharetra orci nec nunc sodales cursus. Morbi hendrerit id orci non vulputate. Duis nulla turpis, bibendum eu dolor sed, euismod mollis velit. Nullam tellus enim, condimentum porta rutrum ac, feugiat in ex. Sed tristique metus nunc, ut elementum elit hendrerit et. Quisque sed interdum ipsum. Etiam posuere.
</div>
</div>
</body>
</html>
I've managed to make a work-around using PHP by just cutting the length of each string at a certain length and appending the triple dots, but I actually want to try and do it with CSS only (to further improve my front-end skills).
You should add fix width to the .soverlay Div
.soverlay{width:250px;}
and then use the following CSS property
word-wrap: break-word;

Squiggly line using CSS3

I have to draw a squiggly line and that needs to be drawn using CSS3. The squiggly line should look like the image attached.
I tried to create using CSS ONLY, but not able to get it right. Any help is appreciated. Here is the fiddle I created https://jsfiddle.net/anirbankundu/myzmknLu/
.jagged-edge{
display: inline-block;
background-color: none;
border-left: none;
width: 1%;
height: 20px;
position: relative;
right: 1%;
}
.jagged-edge:after {
content: '';
position: absolute;
background: linear-gradient(-20deg,transparent 0,transparent
45%,#bcbcbc 45%,#bcbcbc 50%,#C4DCED 50%,#C4DCED 100%) 0 3px,linear-
gradient(-155deg,transparent 0,transparent 45%,#bcbcbc 45%,#bcbcbc
50%,#C4DCED 50%,#C4DCED 100%) 0 3px;
background-size: 100% 6px;
width: 100%;
height: 100%;
left: 45%;
z-index: 0;
}
<div class="jagged-edge">
</div>
I believe this is what you are looking for. I'm sure there could be a more semantic approach but this gets it done. Play with the settings to achieve precise visual. Cheers
$color: #336699;
.wrapper {
padding: 50px;
}
.top-line {
background-color: $color;
display: block;
height: 50px;
position: relative;
width: 3px;
&:after {
background-color: $color;
bottom: -6px;
content: '';
display: block;
height: 3px;
position: absolute;
transform: rotate(25deg);
width: 30px;
}
}
.middle-line {
background-color: $color;
bottom: -10px;
display: block;
height: 3px;
left: -20px;
position: relative;
width: 50px;
}
.bottom-line {
background-color: $color;
display: block;
height: 50px;
margin-top: 20px;
position: relative;
width: 3px;
&:before {
background-color: $color;
content: '';
display: block;
height: 3px;
left: -21px;
position: absolute;
top: -7px;
transform: rotate(25deg);
width: 25px;
}
}
https://codepen.io/garynorris88/pen/yXGYMM
For what it's worth, here's an SVG that you could use as a background on an element to the right or left side of the div.
<svg viewbox="0 0, 20, 70" height="70">
<path d="M 10 0 L 10 30 L 16 35 L 4 35 L 10 40 L 10 70" stroke="#555" stroke-width="2" stroke-linejoin="round" fill="none"/>
</svg>
So the line looks like it has a sideways 'z' in it to me. So I used css to add a one (rotated) via :before pseudo class.
If you like it I can try to tweak as I see a 1 pixel gap and your squiggly is a bit more 'smushed'
Markup:
.squiggly-line {
height: 100px;
border-left: 2px solid #4c6675;
position: relative;
}
.squiggly-line:before {
content: 'z';
font-size: 22px;
position: absolute;
top: 40%;
left:-6px;
background: white;
line-height: 9px;
vertical-align: -2px;
display: inline-block;
transform: rotate(49deg) scaleY(0.7);
color: #4c6675;
font-weight: 600;
font-family: 'Arial';
}
<div class="squiggly-line"></div>
<div class="squiggly-line"></div>
CSS:
.squiggly-line {
height: 100px;
border-left: 2px solid #888;
position: relative;
}
.squiggly-line:before {
content: 'z';
font-size: 22px;
position: absolute;
top: 40%;
left:-6px;
background: white;
line-height: 9px;
vertical-align: -2px;
display: inline-block;
transform: rotate(40deg);
color: #888;
font-weight: 600;
font-family: 'Arial';
}
Use a .svg file for this task and let other browser use a straight line, is what I would do today, because I find that cleaner.
Gimp is a nice program for creating vector graphics, be sure to use crop document to content feature and I'd set the dimensions correctly in the svg as well, save a few lines of css (instead of using other width property).
But you can have older browsers use a png as well (if you care about ~5% of users not seeing that line using this technique):
background: url(../old-browsers.png);
background: linear-gradient(transparent, transparent), url(../path/to/svg);
/*width: something */
Advantage: more freedom and ease
Con: less visually attractive for a small group of users
You may also give a look at background-image and background-size using gradients to draw each bits through a single class and no extra markup:
.jagged {
background:
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50%
gold /* you can add here a bg-color or add another background-image */;
background-size:
2px calc(50% - 0.5em),
2px calc(50% - 0.5em) ,
3em 0.5em,
3em 0.5em,
1em 1px ;
padding:2em;
}
/* example bis */
.jagged + .jagged {
background:
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em top,
linear-gradient(0deg, turquoise, turquoise) no-repeat 1em bottom ,
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.15em calc(50% + 0.25em),
linear-gradient(-45deg, transparent 48%, turquoise 48%,turquoise 53%, transparent 53%) no-repeat -0.65em calc(50% - 0.25em),
linear-gradient(90deg, turquoise ,turquoise ) no-repeat 0.5em 50%,
url(http://lorempixel.com/600/800/nature/6) ;
background-size:
3px calc(50% - 0.5em),
3px calc(50% - 0.5em) ,
3em 0.5em,
3em 0.5em,
1em 2px,
cover;
color:turquoise;
text-shadow: 0 0 1px black;
font-size:1.5em;
<p class='jagged'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p class='jagged'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
https://codepen.io/gc-nomade/pen/weRMBJ

Div moving after resizing

This is what i want to achieve ^ (this is the view on an iphone5 320x568)
But when i resize the window (to iphone 6 375x667 ) i get this
HTML:
<div id="container">
<div class="slicedimage">
<div class="textboxtransparant">
<h2>Since 1928</h2>
<div class="divider"></div>
<br/>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
<i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="transparantblack"></div>
</div>
<div class="slicedimage">
<div class="textboxblack">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non
</p>
</div>
<div class="blacktransparant"></div>
<div class ="line"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: Georgia;*/
font-family: sans-serif;
max-width: 640px;
color: black;
}
#container {
display: block;
height:900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
.slicedimage {
background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
width:100%;
}
.textboxblack {
background-color:black;
}
.line {
position: absolute;
width:1px;
height: 50px;
bottom: 80px; /*half the height*/
left: 50%;
border-left: 1px solid white;
}
.transparantblack {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blackgray {
height:300px;
width:100%;
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
updated the post and since stack overflow is asking me to add more information since my post is mostly code. Yeah u get the point, lets see if this is enough. "information"
Your goal was to keep the white line under the text, in the middle of the blacktransparent element.
To achieve this you need to make from the line element, a child of the blacktransparant div:
<div class="blacktransparant">
<div class="line"></div>
</div>
and set the blacktransparant to be relative:
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
/* Add this */
position: relative;
}
After this you only have to set the arrow in the right place relatively to the blacktransparant div:
.line {
position: absolute;
width: 1px;
height: 50px;
/* bottom: 80px; Change to 25px */
bottom: 25px;
left: 50%;
border-left: 1px solid white;
}

How do I replicate this effect in CSS?

http://i.imgur.com/Ta7cZ.png
The portion to the right of Who with the ----------
Is it a background to the li? I'm really drawing a blank as how to create something like that.
Here you go mess around with this.
http://jsfiddle.net/fjZfL/3/
HTML:
<div id="box">
<h2>who?</h2>
<p>I am 22 Year old designer …</p>
</div>
CSS:
#box {
width: 200px;
height: 150px;
background: #eee;
padding: 0 8px;
}
h2 {
display: inline-block;
padding: 18px 4px 0 10px;
margin: 0;
background: #eee;
}
p {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 20px 10px;
margin-top: -10px;
}
Alternatively - there IS the HR solution
http://jsfiddle.net/UYYh5/4/
Isn't that just a horizontal rule? aka <hr />?
Well, just searched the text in the image, and found the website. This CSS style applied to the p block in question is how it's done I guess.
border-top: 1px solid rgba(0, 0, 0, 0.1)
Here you go: http://jsfiddle.net/x63x2/
The CSS:
body { font-family:arial,helvetica,sans-serif ;
}
.block-item { width:350px ;
height:300px ;
padding:10px ;
margin:auto ;
background:#D4D4D4 ;
}
p { font-size:13px ;
margin-top:14px ;
margin-bottom:14px ;
line-height:18px ;
}
.block-item h1 { display:block ;
background:#D4D4D4 ;
font-size:18px ;
color:red ;
padding:0px 5px 0px 0px ;
position:absolute ;
top:3px ;
}
and the HTML:
<div class="block-item">
<hr>
<h1>Who?</h1>
<p>Nulla porttitor sodales quam, et molestie mi euismod vel. Nunc iaculis ligula ac dolor congue consequat. Cras tristique vulputate auctor. Pellentesque mattis massa vel arcu auctor tristique. Mauris rhoncus porta diam, sit amet euismod turpis viverra eu. Nulla in ligula sed nibh tristique laoreet. Nullam id magna erat. Sed porttitor mauris vel diam pharetra a volutpat tellus volutpat. Quisque placerat laoreet odio sit amet posuere. Duis id libero nisl.</p>
</div>​
If you want to dress up the line, you can style your HR w/ CSS. This is just a basic example.
Here is another alternative.
http://jsfiddle.net/PZxA7/
.title{
background-color:white;
position:absolute;
z-index:10;
}
.bar
{
border-bottom:1px solid;
position:absolute;
display:inline-block;
color:#b5b5b5;
margin-top:-10px;
width:350px;
}
.container
{
width:350px;
}
<div class="container">
<div class="title">W H O?</div>
<div class="bar"/> </div>
<p><br/>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
An easy way to replicate this effect is something like:
div.wrapper{ width: 300px;
font-family: 'Times New Roman';
font-size: 13px;
color: #3b3a3a;
}
div.wrapper div{
margin: 0px 0px;
}
div.header span{
font-size: 14px;
font-family: Verdana;
font-weight: 300;
display: inline-block;
margin: 0px;
width: 60px;
background-color: #fff;
}
div.content p
{
margin: 3px;
}
div.content p span
{
background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -150px -140px;
height: 7px;
width: 30px;
display: inline-block;
}
div.wrapper div.header{
background:url('http://i.imgur.com/Ta7cZ.png') no-repeat 0px -10px;
}
div.wrapper div.footer{
background:url('http://i.imgur.com/Ta7cZ.png') no-repeat -10px -170px;
height: 18px;
}
<div class="wrapper">
<div class="header"><span>Who?</span></div>
<div class="content"><p>I'm a 22 year old designer who spends more time on the internet than I should.
I am currently living in Upstate NY, but would love to someday move away from the cold. I am a sucker
for Apple products and enjoy a well-brewed beer.<span></span></p>
</div>
<div class="footer"></div>
</div>
To me, images always look cleaner for a background that thin. In my example, you'd obviously cut the images down, but you get the idea.