I have a little project here that I am working on. I am not very far with it at the moment, but that is beside the point.
This is the CSS, since I am required to post code if I provide a link:
body{
background: #FF4D4D;
background: -webkit-radial-gradient(circle, #FF4747, #FF0000);
background: -o-radial-gradient(circle, #FF4747, #FF0000);
background: -moz-radial-gradient(circle, #FF4747, #FF0000);
background: radial-gradient(circle, #FF4747, #FF0000);
}
#background {
width: 400px;
height: 400px;
border: 15px solid #FFFFFF;
border-radius: 50%;
margin: 35px 0px 0px 700px;
background: #FF0000;
position: relative;
}
#mailicon {
border: 5px solid black;
border-radius: 25px;
width: 200px;
height: 150px;
margin: 120px 0px 0px 95px;
background: white;
clip: circle(60px 725px 460px 1125px);
}
#flap1 {
background: white;
margin: 50px 0px 0px 0px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: 115px;
width: 115px;
border: thick solid black;
margin: -65px 0px 0px 38px;
}
#flap2 {
background: red;
height: 90px;
width: 172px;
margin: -95px 0px 0px 14px;
border-bottom: thick solid black;
}
.flap {
position: absolute;
}
#opentext {
/*To be done later*/
}
My problem is that I need to hide any part of the mail icon that is outside of the outside of the background div, which is shaped as a circle and the parent div.
I have browsed around and am thinking that my problem relates to clipping or masking, but I can't find a way to properly implement those.
I would rather not just put it behind other divs to turn in invisible because the parent is circular and it would take a lot of extra divs to hide the mail icon fully.
Any suggestions?
If I'm understanding you correctly, you're looking to hide parts of the mail icon behind the circle. If that's the case, you can either use clip() like you have, or use overflow: hidden on a parent div.
Related
How can i make the border to apply for the radial gradient so that the dotted line will apply for the curve at left and right not as a straight line
.container {
width: 160px;
height: 58px;
border: 1px dotted red;
background: radial-gradient(15px at left, #fff 98%, red) left,
radial-gradient(15px at right, #fff 98%, red) right;
background-size: 51% 100%;
background-repeat: no-repeat;
}
<div class='container'>
</div>
I played around with your code and here is what I came up with. This is a tricky one but it works. I added 2 half circle then hide them. I don't know where are you going to use this but an image will be a good idea as well for this.
.container {
width: 160px;
height: 58px;
border: 1px dotted red;
background: radial-gradient(15px at left, #fff 98%, red) left,
radial-gradient(15px at right, #fff 98%, red) right;
background-size: 51% 100%;
background-repeat: no-repeat;
}
.half-circle-left, .half-circle-right {
width: 30px;
height: 30px;
z-index:1;
background-color: white;
vertical-align:middle;
margin-top:8%;
overflow: overlay;
}
.half-circle-left {
float: left;
margin-left: -15px;
overflow: hidden;
border-radius: 0px 15px 15px 0px;
border-right: 1px dotted red;
}
.half-circle-right {
float:right;
margin-right: -15px;
border-radius: 15px 0px 0px 15px;
border-left: 1px dotted red;
}
<div class='container'>
<div class="half-circle-left">
</div>
<div class="half-circle-right">
</div>
MY TEXT HERE! Please put more text here
</div>
As I know it is not possible, instead of using a dotted border you can use box-shadow to act like a solid border and use a pseudo-elements :after :before to draw the circle in both sides.
Here is the code:
<div class='container'>
</div>
.container {
position: relative;
overflow: hidden;
width: 160px;
height: 58px;
background: red;
box-shadow: inset 0 0 0 2px #000;
}
.container: after, .container:before {
content: '';
position: absolute;
inset-inline-start: 0;
width: 30px;
aspect-ratio: 1;
background: #ffffff;
border-radius: 100%;
inset-block-start: 50%;
transform: translateY(-50%) translateX(-50%);
box-shadow: inset 0 0 0 2px #000;
}
.container: before {
inset-inline: auto 0;
transform: translateY(-50%) translateX(50%);
}
I want to make an input text field, like the one on https://www.tesla.com/en_gb/cybertruck/design#battery (it appears after clicking 'buy now') but I am unsure how to approach this.
I have tried adding border-radius but of course that only rounds the corners.
Below is my current code:
<style>
body {
background-color: black;
}
label {
color: white;
}
input {
width: 300px;
height: 40px;
border: solid white 1px;
background: transparent;
color: white;
font-family: 'Consolas';
font-size: 0.9em;
font-weight: bold;
padding: 10px 10px 10px 10px;
transition: border 0.3s ease-in-out;
box-sizing: border-box;
outline-width: 0;
border-radius: 10px 10px 10px 10px;
border-style: none;
border-width: 0 0 3px;
padding: 3px 10px;
}
input:focus {
border: solid white 3.5px;
}
</style>
<label>Test field</label>
<br>
<input type = "text">
I would like this to be responsive if possible, thanks in advance.
They are using clip-path and polygon to do this. See this page for details: https://css-tricks.com/notched-boxes/
As already mentioned, by looking at the source you can see that it's a clip path.
In particular the clip path is applied to a wrapper div as ::before pseudo element as opposed to on the input element. Here's a simple example using the exact same clip path on the website.
body,
html {
padding: 0;
margin: 0;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.wrapper {
width: 200px;
height: 40px;
position: relative;
display: block;
}
.wrapper::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0px 100%, 0px 1.5px, 1.5px 1.5px, 1.5px calc(100% - 1.5px), calc(100% - 11.5px) calc(100% - 1.5px), calc(100% - 1.5px) calc(100% - 11.5px), calc(100% - 1.5px) 1.5px, 0px 1.5px);
}
input {
background: transparent;
border-color: transparent;
border-radius: 0;
color: white;
width : 100%;
height: 100%;
outline: none;
}
<div class="wrapper">
<input type="text" />
</div>
The clip path is kind of too complicated to explain bit-by-bit, but it essentially cuts out the middle of a solid rectangle as well as a little corner. So in this case, the background color is what controls the "border color". In order to animate on hover, it probably changes some elements of the clipping path if I were to guess.
I'm trying to produce a parallelogram/slash look in my webpage as follows:
It's easy to smash two divs together and then you have a rectangle next to a rectangle, but this slash is mind boggling. Is this possible with pure CSS or HTML? The examples I've seen all use SVGs.
html,
body {
min-height: 100%; /* demo only */
}
#page {
min-height: 100vh; /* demo only */
}
#page:before {
content: '';
position: absolute;
width: 25%;
height: 150%;
left: -10%;
top: -25%;
background: #F6990D;
transform: rotate(4deg);
border-right: 4px solid #FEBF78;
}
<div id="page"></div>
Just adding the linear option, but getting around the aliasing jagged edges will be tough regardless of the approach you take.
div {
position: absolute;
top: 0;right: 0;bottom: 0; left:0;
background: rgba(255,163,3,1);
background: linear-gradient(95deg, rgba(255,163,3,1) 0%,
rgba(255,163,3,1) 9%,
rgba(245,205,135,1) 9%,
rgba(245,205,135,1) 10%,
rgba(255,255,255,1) 10%,
rgba(255,255,255,1) 100%
);
}
<div></div>
Start from a square div with four thick borders.
div {
width: 50px;
height: 50px;
border-left: 50px solid green;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid yellow;
}
<div> </div>
Now reduce the square to zero height.
div {
width: 50px;
height: 0;
border-left: 50px solid green;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid yellow;
}
<div> </div>
Now take off the left and bottom borders.
div {
width: 50px;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
}
<div> </div>
Finally, shrink the right border and make it transparent.
div {
width: 50px;
height: 0;
border-top: 50px solid red;
border-right: 15px solid transparent;
}
<div> </div>
You can adjust the numbers and add a shadow to make it look more like the example image. You can also add transform: rotate(360deg) to get cleaner aliasing in certain scenarios (this is a hack; it tricks the browser into switching to GPU-accelerated rendering mode if such a mode is available).
div {
width: 50px;
height: 0;
border-top: 300px solid orange;
border-right: 15px solid transparent;
filter: drop-shadow(10px 0 yellow);
/* HACK: trick the browser into GPU-accelerated mode if possible,
* this can help get cleaner aliasing in certain scenarios. */
transform: rotate(360deg);
}
<div> </div>
#slash {
width: 15px;
height: 100px;
transform: skew(-20deg);
background: red;
}
#container {
padding-left: 20px;
}
<div id="container">
<div id="slash">
</div>
</div>
Just create a square and use skew transform
I need to create a box with a diagonal edge. Below is the picture and here is a link to it.
How would I do this using only CSS and HTML?
I'm aware its possible to create triangles in CSS, so maybe I create one div with the rounded corners for the 'yellow' portion of the box. Not sure how to do the inside grey part though.
I'd like to avoid the multiple images solution because this will be on mobile so that it loads as quickly as possible.
I'm looking into a solution with 3 divs inside and one being a triangle, I found a triangle maker here, then maybe relative position on the yellow div, and absolute position the content after that?
There is a way to achieve this shape without having to use extra elements also. I can understand the reluctance in using multiple images but this approach only makes use of multiple backgrounds and should not have any impact on page load time.
In this approach, we create a linear-gradient background of a smaller size and position it at the right top of the container to achieve the triangle effect.
This approach can also be used with media queries without much issues.
.shape {
height: 400px;
width: 50vw;
background: linear-gradient(225deg, #F3D56A 50%, transparent 50%), #EFEFEF;
background-size: 75px 75px;
background-repeat: no-repeat;
background-position: right top;
border-radius: 4px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, .5);
border-top: 5px #F3D56A solid;
}
#media (max-width: 300px) {
.shape {
width: 150px;
background-size: 50px 50px;
}
}
#media (min-width: 301px) and (max-width: 600px) {
.shape {
width: 300px;
background-size: 50px 50px;
}
}
<div class="shape"></div>
HTML:
<div id="content">
<span></span>
<p class="title">Gold</p>
<p class="subtitle">Starting at</p>
<p class="price">$69.99/mo</p>
More Info
</div>
CSS
#content {
font-family: Helvetica, Serif;
width: 440px;
height: 460px;
background: #EFEFEF;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
-moz-box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
box-shadow: 4px 6px 5px 1px rgba(0,0,0,0.41);
border-top:7px #F3D56A solid;
}
#content span {
border-style: solid;
border-width: 0 110px 110px 0;
border-color: transparent #f3d56a transparent transparent;
line-height: 0px;
_border-color: #000000 #f3d56a #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
float: right;
}
.title {
position: relative;
left: 50px;
}
.title, .price{
color:#2C3E50;
font-size: 45px;
font-weight: 700;
text-align: center;
}
.subtitle {
color: #7A828B;
font-size: 30px;
font-weight: 300;
}
a.button {
text-decoration: none;
color:#FFF;
background: #F3D56A;
padding:20px 30px;
border-radius: 5px;
}
WORKING DEMO
Update:
Media query to 320x480:
#media only screen and (min-width: 320px) and (max-width: 480px) {
#content {
width: calc(100% - 5px);
height: 400px;
}
#content span {
border-width: 0 90px 90px 0;
}
}
Result:
Why don't you just create an image and use that as the background. You could make the image look exactly like the gray and yellow above and then just add it to your "box".
here is the link to a js fiddle I have mocked up - this works pretty well, though I didn't do the entire style https://jsfiddle.net/6pcrneat/
.container {
width:200px;
height:250px;
background:#ffffff;
border:1px solid #000;
position:relative;
}
.shape {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
position: absolute;
right: -45px;
top: -10px;
border-style: solid;
width: 0px;
height: 0px;
line-height: 0px;
border-width: 0px 70px 70px 70px;
border-color: transparent transparent rgb(243, 213, 106) transparent;
moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
}
.text {
margin-top: 100px;
text-align: center;
}
Edit: I'll get back to you on the rounded corner of the triangle; I didn't notice that initially
I have been trying to do the white shape with a div:
http://sircat.net/joomla/sircat/mies/2.png
how do I get the diagonal shapes of the bottom of the div?
I have this for the div:
width: 620px;
height: 440px;
background-color: white;
thank you
Edit: just forget the bg behind the div, I want to make the div with the diagonal borders, not with the help of the bg because it is in the top layer
You can also use borders and the :after pseudo selector: http://jsfiddle.net/qQySU/
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
I've colored the tip for easy identification of the borders. Play around the border widths on the last 3 lines to get the tip you want.
Edit.:
Reference for compability: http://caniuse.com/css-gencontent
Edit 2:
In exchange for semantics, you can get it more crossbrowser you can place the stle on a inner element instead of on the :after pseudo selector.
Simplest (least amount of code) method: just use a CSS linear-gradient http://dabblet.com/gist/3610406
HTML:
<div class='box'>Text goes here...</div>
CSS:
.box {
width: 26em;
min-height: 31em;
padding: 1em;
outline: solid 1px lightblue;
margin: 0 auto;
background: linear-gradient(45deg, dimgrey 47%, black 50%, transparent 50%)
no-repeat 0 100%,
linear-gradient(-45deg, dimgrey 47%, black 50%, transparent 50%)
no-repeat 100% 100%;;
background-size: 50% 14em;
}
Better compatibility & better looking: you could use a pseudo-element with a box-shadow: http://dabblet.com/gist/3610548
HTML:
<div class='box'>text goes here... hover me ;)</div>
CSS:
html { background: darkgrey; }
.box {
box-sizing: border-box;
position: relative;
width: 20em;
height: 20em;
padding: 1em;
margin: 3em auto 0;
background: white;
}
.box:before {
position: absolute;
right: 14.65%; /* 50% - 35.35% */ bottom: -35.35%; /* half of 70.71% */
width: 70.71%; /* 100%*sqrt(2)/2 */
height: 70.71%;
box-shadow: 2px 2px 1px dimgrey;
transform: rotate(45deg);
background: white;
content: '';
}
.box:hover, .box:hover:before {
background: plum;
}