I want achieve design of banner with multiple circle lines with gradient background color. I've research more regarding this. I'm unable to find questions related my concern.
Bellow code is used to create solid color background banner.
.blue-cross-banner{
background: #0FA2EB;
border-radius: 30px;
padding: 4em;
margin: 1em;
}
I cannot upload svg format of banner. It shows the gradient shade color of circle lines.
I found some what related to my question in here https://css-tricks.com/gradient-borders-in-css/.
But it doesn't help to my concern.
#grad2 {
background: linear-gradient(90deg, rgba(15, 162, 235, 0) 33.16%, #0FA2EB 85.35%);
border-radius: 30px;
}
Above css is need to use background gradient color of circle lines.
You can do it like below:
.box {
height: 150px;
background: linear-gradient(90deg, red, yellow);
position: relative;
overflow: hidden;
border-radius:20px;
}
.box::before {
content: "";
position: absolute;
width: 100%;
height: 200%;
top: 0;
left: 50%;
background: repeating-radial-gradient(circle, transparent 0 20px, blue 21px 23px);
clip-path: circle(farthest-side); /* to cut extra circles*/
}
<div class="box">
</div>
Related
I have created a triangle with a border and a coloured background. However it is attached to a rectangle with some content and i can't figure out how to scale the triangle with it.
I have used a pseudo element and put a triangle on top of another triangle to create the border, so not sure if this way is possible to scale with.
My problem is the triangle
HTML:
<div class="skipcontent">
<i class="bi bi-skip-end-circle" style="font-size:36px;"></i>
<p class="alertcontent">content can span onto 2 lines. content can span onto 2 lines. content can span onto 2 lines. content can span onto 2 lines. </p>
</div>
</div>
Here is my CSS:
.container {
width: 700px;
height: 100%;
background: #D9F1FF;
border: 1px solid #7197C9;
position: relative;
color: #000000;
font-size:15px;
border-radius: 5px;
font-family: Arial,Helvetica,sans-serif;
}
/* this CS forms the triangles */
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
/* this border color controls the color of the triangle (what looks like the fill of the triangle) */
.container:after {
top: 0px;
border-color: transparent transparent transparent #D9F1FF;
border-width: 26px;
margin-left:-2px;
}
/* this border color controlls the outside, thin border */
.container:before {
top: 0px;
border-color: transparent transparent transparent #7197C9;
border-width: 26px;
margin-left:-1px;
}
.skipcontent {
padding:0 0 0 20px;
display:flex;
align-items:center;
}
You can do it easily by using "Clippy - clip-path". But you can't add the border and border-radius on everywhere.
Reference site link - https://bennettfeely.com/clippy/
Demo Screenshot - https://prnt.sc/-J3_o3rHqlFU
.skipcontent {
color: #ffffff;
background: red;
border-radius: 5px;
padding: 20px 40px;
clip-path: polygon(50% 0%, 97% 0, 100% 28%, 97% 50%, 97% 100%, 0 100%, 0% 35%, 0 0);
}
If you see it closely there's a little blue line between the border and the profile image.
How do I remove the little background colour/line(of the background image) between the border and the jpg?
here's my css code:
.profile-pic{
border-radius: 50%;
position: relative;
position: relative;
top: -55px;
border: 5px solid white;
This is due to how webpages render borders with antialiasing. The edge of the border has a slight transition to transparent to look smoother. The same thing is done to the image, so the result is a little bit of the background shows through.
Notice you can see a little bit of red around the image in this snippet.
body
{
padding: 50px;
background-color: red;
}
img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
}
<img src="https://placeimg.com/100/100/people"/>
In your example you can see this extra well because the blue line you mention is only around the part of the image that is over the blue section of the parent view. The bottom, which is over white, doesn't have the same effect.
You can fix this by putting whatever color you want as the background color of the image so when the antialiasing happens, your color shows through. I went with white to match the border color.
body
{
padding: 50px;
background-color: red;
}
img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
background: white;
}
<img src="https://placeimg.com/100/100/people"/>
I use linear-gradient on ::after to make a object like this, a disappeared border. now I want to use scale to make one of them such active (selected) but look like it ignore z-index: -1; and show all gradient. I want to display selected one like others.
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
position: relative;
border-radius: 20px;
background: white;
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans::after {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
background: linear-gradient(to top, #ddd, white);
content: '';
z-index: -1;
border-radius: 20px;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
There are lot of topics by this title, I tried but none of them solved my isssue. ps: I can't change html structure, for this reason I used ::after
transform will create a stacking context forcing the pseudo element to be painted inside an no more outside/behind your element. Related question to better understand the issue: Why can't an element with a z-index value cover its child?
Consider a different way to do the same effect by using multiple background where you don't need pseudo element
.Winter-Plans {
width: calc(100%/5 - 16px);
min-height: 360px;
border-radius: 20px;
background:
linear-gradient(white,white) padding-box, /* cover only the padding area*/
linear-gradient(to top, #ddd, white) border-box; /* cover the border area*/
border:1px solid transparent; /* a transparent border for our gradient */
padding: 80px 15px 35px 15px;
margin: 0 8px 20px 8px;
box-sizing: border-box;
float: left;
}
.Winter-Plans.Selected {
transform: scale(1.1);
}
<div class="Winter-Plans">
</div>
<div class="Winter-Plans Selected">
</div>
<div class="Winter-Plans">
</div>
In case you need a solution with a transparent background and a border gradient with radius check this: Border Gradient with Border Radius
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'm trying to recreate these arrows in CSS for a website I'm redesigning to be responsive. These two guys were done with static images but I'd like them to be pure CSS.
This is a sprite that was used for mouseover replacement. The bottom is the mouseover state. The background behind the arrow needs to be transparent.
I thought it would be a simple div with a p or heading tag inside:
<div class="arrow_box">
<p>UTILITIES</p>
</div>
I've searched for examples everywhere and everything I've tried to modify never lets me seem to have full control of the width and height of the element. The width (with the arrow) is 114px. The height (of a single state) would be 29px.
I've played with this for the better part of an hour trying to get it properly sized but nothing seems to work. http://codepen.io/anon/pen/bpBGQL My lack of knowledge on how this works is partially to blame.
So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0, and padding:15px. Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.
<div class="arrow"><span>text</span></div>
.arrow{
display:inline-block;
height:auto;
background-color:orange;
}
.arrow span{
display:inline-block;
line-height:0;
padding:15px;
color:white;
}
.arrow::after{
width: 0;
height: 0;
position: absolute;
right:0
top: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid orange;
content: "";
}
Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.
Fiddle
You can do this with :after pseudo element. You can change color of pseudo element on hover state like this .arrow_box:hover:after
* {
box-sizing: border-box;
}
p {
margin: 0;
padding-left: 10px;
}
.arrow_box {
background: #627680;
display: block;
color: white;
position: relative;
height: 30px;
line-height: 30px;
width: 114px;
transition: all 0.3s ease-in;
}
.arrow_box:after {
content: '';
height: 0;
width: 0;
position: absolute;
top: 0;
right:0;
transform: translateX(100%);
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
border-left: 20px solid #627680;
border-right: 15px solid transparent;
transition: all 0.3s ease-in;
}
.arrow_box:hover {
background: #2A92C2;
}
.arrow_box:hover:after {
border-left: 20px solid #2A92C2;
}
<div class="arrow_box">
<p>UTILITIES</p>
</div>
did you consider gradient backgrounds ?
body {
background: linear-gradient(45deg, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray, gray, lightgray);
/* demo purpose only */
}
.arrow {
text-transform: uppercase;
/* optionnal */
padding: 3px 1.5em 3px 0.5em;
color: white;
background: linear-gradient(225deg, transparent 0.6em, #627680 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #627680 0.6em) bottom no-repeat;
background-size: 100% 50%;
/* each gradient draws half of the arrow */
}
.arrow:hover {
/* update gradient color */
background: linear-gradient(225deg, transparent 0.6em, #2A92C2 0.6em) top no-repeat, linear-gradient(-45deg, transparent 0.6em, #2A92C2 0.6em) bottom no-repeat;
background-size: 100% 50%;
}
<span class="arrow"> Utilities</span> <span class="arrow"> testing</span>
You may also want to take a look at Responsive Arrow Breadcrumb Navigation for breadcrumbs and imbricated arrows or Create dynamic arrow-like shape with CSS
Does this pen provide what you need?
http://codepen.io/anon/pen/dMOPmV (may require some pixel pushing to get it perfect)
It just required adjusting:
border-width: 27px;
margin-top: -35px;
and adding a hover state for the main element and before element.