Currently I have markup for a dotted border line since border is pretty crappy when it comes to making actual dotted borders. my markup is the following
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-x;
background-size: 6px 2px;
height: 9px;
width:100%;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
However the problem I am having is I want to be able to make the same sort of border but vertical instead of horizontal. I have set background-repeat: repeat-x; but then I just get one solid line. Is it possible to do a vertical radial-gradient?
I played around with your horizontal border and got this vertical dotted border. Take a look at background-repeat: repeat-y;, it's now vertical and the background-size has also changed.
I changed the width and height to get a decent amount of space to play in.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100px;
width: 9px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Like this ? You forgot to change the dimension. Sorry if that's not what you asked.
.dotted-line {
background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
background-repeat: repeat-y;
background-size: 2px 6px;
height: 100vh;
width:10px;
margin: 20px 0 0 0;
}
<div class="dotted-line"></div>
Related
I have an image which covers an entire element using something like #myDiv {background-image: url("../images/background.jpg "); background-repeat: no-repeat; background-size: cover; background-position: center;}
Next, I would like to gray out the left side of the image similar to that shown below.
How can this be accomplished? It doesn't need to look exactly the same, but only similar.
You may use linear-gradients since you use background-image
html {
min-height: 100%;
background:
linear-gradient(to right, rgba(0, 0, 0, 0.75) 60px, transparent 60px), /* the gray, reset opacity to your needs : here 0.75 */
linear-gradient(to right, transparent 60px, red 60px, red 64px, transparent 64px), /* a red line ? */
url(http://lorempixel.com/200/200/fashion) /* and finally, image laying underneath gradients */;
background-size:
auto,
auto,
auto 100%;
}
you could play with a pseudoelement and a RGBA background, e.g.
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg);
width: 250px;
height: 400px;
position: relative;
}
#mydiv:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 30%;
background: rgba(255,255,255, .3);
}
Codepen: http://codepen.io/anon/pen/OyVYwe
Or you could simply add a transparent left border to the element, e.g.
box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;
Codepen: http://codepen.io/anon/pen/ZbGNqL
Or you could use an inset box-shadow
box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;
Codepen: http://codepen.io/anon/pen/avOrXE
Please do not vote for this answer as it was user3791372's comment (yet not yet an answer) and not mine. If you think it is the right approach, please provide a comment why you think so.
http://codepen.io/anon/pen/MaaWMB
<div id="mydiv">
<div id="sidebar"></div>
</div>
#mydiv {
background: url(http://www.psdgraphics.com/file/cherry-wood.jpg) bottom;
width: 230px;
height: 400px;
}
#sidebar {
background-color: white;
opacity: 0.2;
filter: alpha(opacity=20);
width: 50px;
height: 100%;
}
I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below.
I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side.
Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can then have a look at adding the image, but the main issue is not knowing whether this is possible with CSS.
With an svg, it is pretty simple :
svg {
display: block;
width: 100%;
height: 90px;
background: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
Note that I used the preserveAspectRatio="none" attribute so that the shape can have 100% width and keep 90px height
And here with a monkey image :
div {
position: relative;
}
svg {
display: block;
width: 100%;
height: 90px;
background: yellow;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #fff;
border-radius: 50%;
padding: 10px;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>
You can do this without any clipping and just using borders in a unique way. This should also be cross-browser compatible, but I haven't tested it across everything
Initially divided this into 2 separate divs / triangles and joined them, but thanks to web-tiki and kaiido perfected it to use only 1 div and minimal CSS
*{
border: 0;
padding: 0;
margin: 0;
}
#gradient {
width: 0;
height: 0;
border-style: solid;
border-width: 90px 100vw 0 0;
border-color: yellow black transparent transparent;
transform: scale(1.0001);
}
<div id="gradient"></div>
Original Answer using multiple divs:
*{
border: 0;
padding: 0;
margin: 0;
}
#container {
width: 100%;
position: relative;
}
#container div {
position: absolute;
}
#top-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 90px 100vw 0 0;
border-color: yellow transparent transparent transparent;
}
#bottom-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 90px 100vw;
border-color: transparent transparent black transparent;
}
<div id="container">
<div id="top-triangle"></div>
<div id="bottom-triangle"></div>
</div>
Use a linear gradient
div {
height: 90px;
background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}
<div></div>
You can use CSS3 clip:
.yellow {
width: 100%;
height: 90px;
background: yellow;
-webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
width: 100%;
height: 90px;
background: black;
-webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
clip-path: polygon(100% 0, 0 100%, 100% 99%);
margin-top: -90px;
}
<div class="yellow"></div>
<div class="black"></div>
Demo: http://jsfiddle.net/zLkrfeev/2/
It's not widely supported by the browsers: http://caniuse.com/#feat=css-clip-path
if you want to put diagonal border in column you can do it this way and its 100% responsive. your requirement might be different though. I put it transparent image which contains white diagonal border in that section's right column.
<div id="wrapper">
<div class="h-row">
<div class="h-left">
</div>
<div class="h-right">
<div class="hr-box"></div>
</div>
</div>
</div>
<style>
.h-row{display: table; table-layout: fixed; height: 100%; width: 100%;}
.h-left,
.h-right{display: table-cell; vertical-align: top; height:250px;}/*height is just for demo purpose you can remove it ofcourse and fill the content */
.h-left{background: #e9eae2; padding: 50px 83px 15px 165px; width: 69%;}
.h-right{background: #7acec3 url('https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3') no-repeat center center/ 100% 100%; padding: 50px 165px 15px 0; width: 31%; position: relative;}
.h-left .row{margin:0 -44px;}
</style>
https://codepen.io/neel555nc/pen/LgjoOg
You can do this using a gradient.
body {
height: 200px;
margin: 0 0 20px 0;
background-color: transparent;
background-size: 20px 20px;
background-image:
-webkit-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
background-image:
-moz-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
background-image:
-o-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
background-image:
repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
}
JSFiddle
I need to create an underline effect with a bottom border that is smaller than the h2 title's width. Usually I don't upload images but I figure it might help explaining the question a bit further:
You could use a pseudo-element for this. (example)
.pseudo_border {
position:relative;
display:inline-block;
}
.pseudo_border:after {
content:'';
position:absolute;
left:0; right:0;
top:100%;
margin:10px auto;
width:50%;
height:6px;
background:#00f;
}
Just absolutely position a pseudo-element relative to the parent element. Position it 100% from the top and use a combination of left:0; right:0 and a margin of auto for horizontal centering. Modify the height/width of the element accordingly and change the margin-top for the spacing.
Other approach :
Box shadow with a negative spread radius :
body{text-align:center;}
h2{
font-size:40px;
color:#409FB3;
display:inline-block;
height:50px;
box-shadow: 0 25px 0 -23px #5CC7A8;
}
<h2>Some title</h2>
Note : you need to make sure that - spread-radius x2 < height otherwise the box-shadow will have 0 height and disapear.
You can also do this using linear-gradient. In this method, a small background image is created using gradients such that it is transparent for the first and last 25% while the rest 50% has the color (thus making it look like it is 50% of the actual h2 text). This background is then positioned at the bottom of the element to make it look like a bottom border. The size of the border can be varied by modifying the background-size.
The effect would hold good even when the amount of text within the h2 varies. The main drawback however is the relatively poor browser support for gradients as compared to the pseudo-element or the box-shadow approach.
Note: The use of the script in the answer is only for avoiding browser prefixes :)
h2{
display: inline-block;
text-align: center;
padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%);
background-size: 100% 5px;
background-position: 0% 100%;
background-repeat: no-repeat;
}
.semitransparent{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, rgba(50,50,50,0.25) 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
.colored{
background: linear-gradient(90deg, transparent 25%, lightseagreen 25%, lightseagreen 75%, transparent 75%), linear-gradient(90deg, transparent 0%, aliceblue 0%);
background-size: 100% 5px, 100% 100%;
background-position: 0% 100%, 0% -5px;
background-repeat: no-repeat;
}
/* Just for demo */
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
font-family: Calibri, Tahoma;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Some Text</h2><br/>
<h2 class='semitransparent'>Some Lengthy Text</h2><br/>
<h2 class='colored'>Some more examples yay!!</h2>
You could use a sort of 'fake' border by simply wrapping a div around it and making a border div after the title
JSFiddle
HTML
<div id="border-wrapper">
<h2>My address</h2>
<div id="border"></div>
</div>
CSS
#border-wrapper{
position:relative;
display:inline-block;
}
#border{
position: relative;
width: 50%;
height: 2px;
background-color: blue;
margin: 0 auto;
}
Almost all of the solutions I've seen for this effect in the past have relied on positioning - but using display: flex we can achieve it pretty easily. The below is an example of a heading, but it can be used on any element. Just bear in mind the nature of flex-direction: column will stack any child elements.
HTML
<h3 class="heading">Hey presto! We have an underline.</h3>
CSS
.heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.heading:after {
content: '';
border-bottom: 1px solid #ccc;
padding-top: 10px;
width: 50px;
}
Note you may have to add vendor prefixes for flex depending on browser support (mostly previous versions of IE, of course) https://caniuse.com/#search=flex
h2 ::after {
background: #f1991b none repeat scroll 0 0;
content: "";
display: block;
height: 2px;
margin-top: 15px;
width: 50px;
}
<style>
.main{
text-align:center;
}
.title{
font-weight: 300;
display: inline-block;
padding-bottom: 15px;
position: relative;
}
.title::after {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 0;
border-bottom: 3px solid #ff5533;
right: 0;
margin: 0 auto;
}
</style>
<div class="main">
<h1 class="title">
Your Title
</h1>
</div>
I have been looking at how to do this "inverse triangular" background using css. I am referring to the white diagonal parts on the bottom, on top of the background (fixed) image.
The most I've gotten is to shapes, which aren't apparently a good solution having in mind that it is for a responsive design. I don't care if when the window is narrower there is just one diagonal, as long as there is no horizontal scroll. But shapes and its absolute width mess that up.
I apologize if this is a silly/common/often asked thing. I haven't been able to find it, most probably due to lack of technical term. Thank you very much :)
EDIT: The page keeps scrolling down! There is content below the diagonals/triangles. The triangles are not the bottom of the page.
Here's the fiddle with something similar and responsive: http://jsfiddle.net/BLbu5/
HTML:
<body>
<div id="triangle-holder">
<div id="triangle-1"></div>
<div id="triangle-2"></div>
</div>
</body>
CSS:
body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0;
}
#triangle-1 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-right: 100vw solid transparent;
float: left;
}
#triangle-2 {
width: 0;
height: 0;
border-bottom: 30vw solid red;
border-left: 100vw solid transparent;
}
#triangle-holder {
position: absolute;
bottom: 0;
}
Read about the technique here: https://css-tricks.com/examples/ShapesOfCSS/
Hope it works!
You'd achieve the same result with a 'background img' with following styling:
#bg{
position: fixed;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index:-1;
-webkit-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
-moz-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
-ms-clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
clip-path: polygon(
0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
);
}
and in html you would add:
<img id = 'bg' src = 'path.jpg'> </img>
I would recommend using html canvas and either a rectangle with a triangle clip region or two inverted right-angle triangles positioned against the bottom edges.
This would require javascript.
Other than that you could use some CSS tricks like this: http://jsfiddle.net/pgLP2/
This would not be very elegant as it would require manual handling positions and dimension.
HTML:
<div class="content">Some Content</div>
<div id="toptriangle"></div>
CSS:
body {
color: white;
background-color: #666666;
}
.content {
text-align: center;
}
#toptriangle {
position: relative;
width: 0px;
height: 0px;
top: 100px;
left: -10px;
border-right: 500px solid white;
border-top: 300px solid transparent;
border-left: 500px solid white;
border-bottom: 400px solid white;
}
#example1 {width: 500px;
height: 250px;
background-image: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png),
url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png);
background-position: 20px 10px, 100px 250px;
background-repeat: no-repeat;
}
Background-image with fixed background-position don't work Demo
You are having same value for height and last number in background position. Change to this and see.
background-position: 20px 10px, 100px 100px;
Demo
Write it as -
#example1 {
width: 500px;
height: 250px;
background: url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 20px 10px, url(http://www.css3.info/wp-content/themes/new_css3/img/sheep.png) no-repeat 200px 50px;
}
Demo
Your code also works but the problem with your code is that you are setting top position of the second image at 250px; where the height of your container is 250px; That's why it's not visible :)