Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I was recently thinking about potentially interesting interface design ideas, and one idea that came to mind was a kind of futuristic looking box-based design in which elements would have thin and semi-transparent border lines with small opaque boxes at the corners.
The problem with that for me was thinking of a pure CSS solution for it because I didn't want to add any additional tags in the HTML, and through CSS I thought it would work with pseudo-classes but one element would only be able to have two (with :before and :after)
I'm grateful for any helpful ideas on how one could achieve such a design using only CSS if it's even possible. Thank you in advance.
I added an Image from the Movie "Oblivion". That is roughly how I imagined it.
Probably the best description is the part around "Tour Code_"
I know #c-smile has already answered your question, but you can achieve this without images using only CSS. Like so:
body{
background-color:black;
}
.dots {
width: 200px;
height: 200px;
background-color: transparent;
position: absolute;
left: 20px;
margin:10px;
border: solid 1px rgba(255, 255, 255, 0.5);
}
.dots:before, .dots:after {
content: "";
position: absolute;
top:-5px;
height: calc(100% + 10px);
width: 10px;
background-image: linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px),linear-gradient(rgba(255, 255, 255, 1) 5px, rgba(255, 255, 255, 1) 5px);
background-size: 10px 10px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.dots:before {
left: -5px;
}
.dots:after {
right: -5px;
}
<div class="dots"></div>
Granted it uses gradients so you may need to be careful with browser compatibility, but it's pure css as requested.
Check CSS border images samples here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want use Material Design dark theme guidelines (https://material.io/design/color/dark-theme.html) in HTML code, but i can't find info, how to overlay colors for get lighter colors (example: Dark gray (#121212) background and bit lighter panels).
I know that some JS frameworks support this, but i want use pure HTML/CSS.
How to make this?
I'm not sure if this is exactly what you're describing, but you can create an element with a background-color that has adjustable transparency using an RGBA color. IE to do a 50% translucent white overlay: background-color: rgba(255,255,255,0.5).
.container {
background-color: darkred;
height: 200px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background-color: rgba(255, 255, 255, 0.5);
height: 100px;
width: 100px;
}
<div class="container">
<div class="content">
test
</div>
</div>
You could also layer your colors using gradient background-images, which would let you do the layering in a single element. This lets you stack the colors:
.content {
height: 200px;
width: 200px;
background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(darkred 0%, darkred 100%);
}
<div class="content">
test
</div>
Make sure to put the top layer first in the rule.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I have the following css code for drawing a circle on a page.
.full-circle {
background-color: rgba(204, 0, 102, 0);
border: 3px solid #333;
margin: auto;
height: 75px;
width: 75px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
}
It is called by:
<div class="full-circle">
Works fine in Firefox but when I run it in IE it appears as a square and i'm not sure why.
Marvin pointed it out in the comments, but it is the answer to your problem: you have not specified the normal border-radius. Furthermore, if you're looking to create a circle, you want 50%, not 75px. 75px may make your particular div a circle, but if you decide to make the width wider, it will render differently. Your CSS should look like this:
.full-circle {
background-color: rgba(204, 0, 102, 0);
border: 3px solid #333;
margin: auto;
height: 75px;
width: 75px;
border-radius:50%;
}
EDIT: As Rob pointed out, you probably don't even need the -moz and -webkit prefixes unless you are designing a website for a user-base you know uses older browsers. I removed them from the example.
As noted in the comments by Rob, most browsers have had no need for vendor prefixes since 2010, just add
border-radius: 75px;
IE8 did not support this property, IE9 supported it without the -ms- prefix.
But check out #Vector's answer, you should really be using % and not px
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need create a pattern background for one div, with fluid width. Like a background image. I would want if is possible make it only css3, and how to do.
Triangle: height: 27px Width: 46px
This can be achieved with a repeating background.
CSS
.pattern {
background-image: linear-gradient(319deg, black 16px, transparent 17px), linear-gradient(39deg, black 16px, transparent 17px);
background-size: 54px 23px;
background-repeat: repeat-x;
height: 100px;
}
You need 2 diferent backgrounds, one for each half of the triangle. The angle and size is the tricky part.
Browser requests: multiple background image, gradients.
I have set for the gradints only the last w3c syntax, you can make that work in older browsers using the prefixed versions
fiddle
This creates a triangle with the sizes u gave
width: 0px;
background-color:#423434;
height: 0px;
border-style: solid;
border-width: 27px 23px 0 23px;
border-color: #ffffff transparent transparent transparent;
Yes it is!
Html
<div id="leftTri"></div>
<div id="tri"></div>
<div id="rightTri"></div>
CSS
#leftTri{
width:0;
height:0;
border-bottom:27px solid green;
border-right:46px solid transparent;
float:left;
}
#tri{
width:0;
height:0;
border-bottom:27px solid green;
border-left:46px solid transparent;
border-right:46px solid transparent;
float:left;
}
#rightTri{
width:0;
height:0;
border-bottom:27px solid green;
border-left:46px solid transparent;
float:left;
}
Here is a link to a JSFiddle for you http://jsfiddle.net/Fdng8/2/
Yes it is. You can even use triangle generator here
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am trying to create a website background similar to http://www.latlong.net/ but i'm not having any luck. Is this green and gray background one image or is that a green image at the top with a gray background?
I cannot find the css for the background to see what they have, it comes out all jumbled with alot of extra google maps css on it.
Can anyone see what they are doing to do the strip across the top and gray below?
Thanks!
Extracted from inspecting element with Chrome; You need:
body{
background-color: rgb(235, 237, 231); /* This is #EBEDE7*/
}
header{
background-color: rgb(215, 230, 184); /* this is #D7E6B8*/
}
Working fiddle: http://jsfiddle.net/shahverdy/NByX9/
How to find this?
Generally if you want to find out that how Html/Css of a webpage is working, the best way is to use some tools like Chrome Developer Tools instead of reading the Html/Css Files from source. There are some other tool in other browsers too.
In Chrome you need to right click on any element of the page and select inspect element.
You can find this out by using Chrome developer tools and inspecting the element:
https://developers.google.com/chrome-developer-tools/
Looks like they are styling the header element using a background color and bottom border and shadow.
header {
margin-bottom:10px;
background-color: #D7E6B8;
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
It is not an image but the background-color css attribute. You can do something like:
<header>My header</header>
with the CSS:
header { background-color: #D7E6B8 }
The body of your page can have css for the gray background:
body { background-color: #EBEDE7 }
There is no background image in that, all are css background colors and shadows.just try with the following,
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I think what you're referring to is the shadow. It's not gray, but black with a high transparency.
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
This is on <header>, which also has a solid green background-color (actually #D7E6B8).
Following classes are used in given page:
header {
background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
border-bottom: 1px solid #B5B09A;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
body {
background-color: #EBEDE7;
}
I wish to create a white circle with fuzzy edges contained within a transparent div by using css gradients.
With the z-index higher than the body and absolute positioning I should be able to move this over any part of the page and "white-out" everything beneath the circle.
I have tried my favorite gradient generators, but they haven't worked.
<div id="circle"></div>
css
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
Try using http://www.colorzilla.com/gradient-editor/.
Here's one I made using their tool: (Set the orientation to radial)
http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom
To make the edges more fuzzy, drag the second opacity stop further from the white - and vice versa.
try white background with box-shadow's inset property to create fuzzy edges. Although I don't get what fuzzy means to you. If you have a specific color in mind for the edges, I might be able to give you the code.
Used the gradient suggested by George Reith.
CSS
#white-circle {
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent;
height: 100px;
left: 150px;
position: absolute;
top: 0;
width: 100px;
z-index: 1;
}
Here is the outcome: http://jsbin.com/avipih/1
I guess that radial gradient is an overkill for such purpose. Here's much simplier solution with better browser support: http://cdpn.io/yrJji