How can I make the following shape in CSS3, without using pseudo-classes like ":before"?
I did it very easy with :before, but the thing is that I don't want to have a solid element on the gray area (see JSFiddle - http://jsfiddle.net/aUdLr/2/)
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 100%;
position: relative;
}
div:before{
content: "";
width: 100%;
height: 110%;
background: gray;
position: absolute;
left: 5px;
top: -5%;
border-radius: 100%;
}
You can use border width:
div{
width: 100px;
height: 100px;
border-radius: 100%;
border-width: 0;
border-left:solid 10px red;
}
Scientifically inaccurate example: http://jsfiddle.net/aUdLr/4/
Keep in mind that the outer shape is not a perfect circle, because the border is added to the width. You can compensate by reducing the width, or by using Box-sizing: Border-box.
To get the effect of a small circle eclipsed by a larger circle, you can add a shadow to a transparent element:
div{
width: 100px;
height: 100px;
border-radius: 100%;
background-color:transparent;
box-shadow: -23px 0 0px -15px #ff8;
}
Example: http://jsfiddle.net/aUdLr/6/
Simplest CSS3 solution that comes to my mind:
div:before {
font: 80px serif;
color: red;
content: "(";
}
Here's a fiddle.
(Now seriously- if you want a good amount of control over the shape, I suggest to use SVG.)
Related
I have a div which looks something like this:
.box{
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 3px;
width:100px;
height:100px;
background:red;
}
<div class="box"/>
And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?
linear gradient
blur filter
absolute positioning
pseudo-elements
flexbox
.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}
.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}
/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}
.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>
CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS
Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>
Here's my issue:
I have a mockup from a design company that wants a text block with a 'broken' square border behind some big text that looks like this (description: there is a small white frame behind large text that is broken up by the text, and then a smaller text link below):
Image of an element on client's website,
In the design, the text is displayed accross the white square frame. The way I have implemented it right now is to make the big text's background color gray. Because the current image's background is gray the desired effect is achieved.
What is needed is to achieve that effect (of breaking the white frame) REGARDLESS of the appearance of the image. Because right now, this happens:
the gray background of the text appears like a box in front of the image -- it ought to be transparent
To further illustrate, if I set the background-color of the big text to transparent, the whole frame is shown (the desired effect is a broken frame):
background: transparent #1
More info if it helps:
The white frame element is just a div with a white border.
I am not sure exactly what to search for in this case, if there is an appropriate CSS solution (preferrable) or if I need to use SVG or maybe a PNG? Thank you for any help.
As #Temani Afif pointed out in the comments, it's not one box, but two separate shapes in CSS.
I made an example to illustrate this using flexbox.
.page {
background-color: black;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.box-top {
width: 100px;
height: 10px;
border-color: white;
border-width: 2px;
border-style: solid;
border-bottom: none;
}
.box-bottom {
width: 100px;
height: 30px;
border-color: white;
border-width: 2px;
border-style: solid;
border-top: none;
}
.separator {
color: white;
width: 100%;
margin: 5px 0;
padding: 0;
font-size: 40px;
text-align: center;
}
<div class="page">
<div class="box-top"></div>
<p class="separator">
Headline
</p>
<div class="box-bottom"></div>
</div>
You can make a square element with a border and use a mask on it:
body {
margin: 0;
min-height: 100vh;
background: black;
box-sizing: border-box;
padding-top: 1px;
}
h2.fancy {
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 40px, 100% 40px, 100% 100%, 0 100%);
}
<h2 class=fancy>I'm a fancy title...</h2>
The advantage of this solution is that you can make it scale easily with what might change on various screen sizes. For example, with the title's font-size:
document.querySelector('input.font-size').addEventListener('input', function(e) {
document.querySelector('h2').style.fontSize = e.target.value + 'px';
})
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/800) center /cover;
box-sizing: border-box;
padding-top: 1px;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
h2.fancy {
z-index: 1;
position: relative;
text-align: center;
color: white;
padding-top: 12px;
}
h2.fancy:before {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
display: block;
border: 5px solid white;
clip-path: polygon(0 0, 100% 0, 100% 10px, 0 10px, 0 calc(10px + 1.3em), 100% calc(10px + 1.3em), 100% 100%, 0 100%);
}
input[type=range] {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 1;
}
<h2 class=fancy>I'm a fancy title...</h2>
<div class=overlay></div>
<input type=range min=12 max=36 class=font-size>
The disadvantage is that it doesn't work in IE or Edge lower than 18 or in Opera mini. This particular example works in IE 18, though, as it only uses polygon().
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
tried text-align center and margin auto, both doesn't work and I do not want to used to use the 'margin hack' for centering..
http://jsfiddle.net/st9AM/1/
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
First of all, using margin: auto; is not a hack
And to center your circle inside the circle, you can use positioning techniques, like position: absolute;. Here, I am using position: absolute; on the inner circle, than am assigning top and left properties with a value of 50% and than am using margin-top and margin-left and deducting 1/2 of the height and width.
Why am deducting 32px? As I already said am deducting exactly half the total width and height so this also includes the border of your element which is set to 2px which makes your element 64px in height and width respectively.
To vertical-align the + symbol, am using line-height property as I can only see a single character to be vertically aligned(you didn't said but technically I can assume what shape are you looking for), alternatively you can also use vertical-align: middle; but you need to set the container element to display: table-cell;
Demo
Last but not the least, you should nest the span tag inside the inner circle div.
.circle{
float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}
.inner{
text-align: center;
line-height: 60px;
position: absolute;
top: 50%;
margin-top: -31px;
left: 50%;
margin-left: -31px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Here's a cleaner solution.
with one HTML element only.
HTML:
<div class='circle'></div>
CSS:
*
{
margin: 0;
padding: 0;
}
.circle, .circle:after
{
border-radius: 50%;
border: 2px solid #DDD;
text-align: center;
}
.circle
{
width: 120px;
height: 120px;
font-size: 0;
}
.circle:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.circle:after
{
content:'+';
font-size: 20px;
padding: 20px 0; /* 2*padding + font size = innerCircle height*/
display: inline-block;
vertical-align: middle;
width: 50%;
}
You had "float: left" in the inner circle, which you didn't need
//float: left;
Working fiddle
remove float left and use margin: 0 auto;
.circle{
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
margin:0 auto;
}
Have a look at this fiddle. You wrote float:left; and wanted to center the image. Remove the float:left; and it works fine.
Current browsers (May-22) work with this (replace 261px and 165x by 50% of your image size... mine is 522px x 330px ):
{
position:absolute;
left: calc( 50% - 261px );
top: calc( 50% - 165px );
}
I have found information on how to create various shapes, such as trapezoids and hearts, using only CSS; however, they are solid shapes. Is there a way to create a shape, such as a trapezoid, that is transparent and only displays an outline/border?
By making two shapes and overlapping them, with one larger than the other, it is possible to make it appear to have this effect, but that would only work if the background behind the shape is a solid color, which may not always be the case. Thus the reason for the transparency.
For examples of the CSS shapes: link; look at the triangles, for example.
Thank you.
This is usually done with border tricks, and those are not really helpful for this
You need others techniques for that.
For instance, see this CSS
body {
background: linear-gradient(90deg, lightblue, yellow)
}
.trapezoid {
left: 50px;
top: 50px;
position: absolute;
height: 100px;
width: 500px;
background-color: transparent;
}
.trapezoid:before {
content: '';
width: 57%;
height: 100%;
left: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 0px 3px 3px;
-webkit-transform: skewX(-20deg);
}
.trapezoid:after {
content: '';
width: 59%;
height: 100%;
right: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 3px 3px 0px;
-webkit-transform: skewX(20deg);
}
fiddle
The base element has the background transparent, as per your request. I have set a gradient in the body to verify it.
The you add 2 pseudo elements, that have the borders set (except the inner one), and that are skewed to achieve the trapezoid
You can set background color to transparent
background-color: transparent;
The way that these shapes are typically done in css is through border manipulation. When you have a transparent trapezoid it's just a rectangle with the sides lopped off by a border. Because of this, there is no way to use a uniform border and maintain the same shape.
What's your current code look like? You should just be able to add a border to it and no background color. Example: http://jsfiddle.net/tBBkg/
Overlapping transparent shapes (with border):
#square {
width: 140px;
height: 140px;
border: 2px solid blue;
position: absolute;
}
#circle {
position: absolute;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid pink;
}
Perhaps I'm not understanding the question properly, in which case could you clarify?