I am making a webpage with header menu,
and content has gradient text somewhere.
I just found out that the text is visible through the header menu, it seems the text somehow makes the header menu transparent.
the text is visible through the menu
supposed to look like:
Is this normal? Is there any other way to make gradient text without affecting other elements?
css of the header and the text looks like this by the way:
#header {
position: sticky;
top: 0;
background-color: black;
height: 100px;
align-items: center;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.content_right_text {
font-size: 60px;
font-weight: 700;
background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 10%, #ffffff 50%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
Try adding a z-index to your header element so that it stays on top even while scrolling as the position is set to sticky.
#header {
position: sticky;
.
.
.
z-index: 1;
}
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);
}
I'm trying to create a simple little frontend project, and I need to make some text discernible from a background image.
How can I make the background behind the text blur? It's just blurring the container, I'd like to only blur behind the actual text.
My current code for this text:
.center h1 {
font-size: 100px;
font-style: italic;
font-family: 'Montserrat', sans-serif;
background: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.25));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
backdrop-filter: blur(10px);
}
/* added by editor for deomnstration purpose */
body {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
background-size: cover;
}
.center {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -100%);
text-align: center;
width: max-content;
}
<div class="center">
<h1>GLUSH</h1>
<!-- Added by original poster for better running -->
</div>
This is just ending up like this:
Is there any way to do this? I was working with background-clip earlier...
Just use backdrop-filter and play with the blur and saturate filter to your liking. blur obviosly blurring the background while saturate givin it more "color depth"
h1 {
backdrop-filter: blur(10px) saturate(70%);
}
/* to make the header only as wide as the content and centering it */
h1 {
width: min-content;
padding: 20px;
margin: 0 auto;
}
/* added by editor for deomnstration purpose */
body {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5b/St_Mary%27s_Church%2C_Castle_Street_1.jpg');
background-size: cover;
}
h1 {
font-size: 5em;
}
<h1>GLUSH</h1>
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.
I am attempting to make a box that displays text when you hover over it.
this is the code I have currently:
<style>
/* WHILE HOVERED */
.one:hover {
box-shadow: 0 15px 30px black;
background: #00576f;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}
/* WHILE BEING CLICKED */
.one:active { }
.other {
width: 200px;
height: 200px;
line-height: 100px;
color: white;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin-top: 10px auto;
/* BACKGROUND GRADIENTS */
background: #00485c;
</style>
<body>
<center><div class="other one"/div></center>
</body>
I know that there is probably a simpler way to do what I have so far, but I only need to know how to make text appear in the square when you hover over it.
thanks.
Well you can do this in pure CSS, but JavaScript may be the better option if you're unable to change the HTML markup. At any rate:
.one:hover:after {
content: "My text here!"
}
I have a box container as shown bellow
Which i want to code in a modular way so that i can use the html css structure to build any size box in width and height. I will be using Bootstrap to code the website
Which is the best way to get started.
Let's say that gradient on the top is named gradient.png
.box {
border: 1px solid gray;
border-radius: 3px;
background: white url("gradient.png") ;
background-repeat: repeat-y;
padding-top: 20px;
}
I think it's mostly self explanatory; the repeat-y just makes it repeat accross the top but not throughout the rest of the image. The padding makes it so the text doesn't start at the top. See how it works for you.
By the way, is that from the Apple discusion page?
I tried to keep this as similar to your example as I could with straight CSS. Given this approach, you won't find immediate support in IE8 and lower.
The markup for the box itself is pretty simple:
<div id="modal">
<header><h1>Something Here</h1></header>
<section>
<p>Pellentesque habitant morbi tristique...</p>
</section>
</div>
The CSS for this markup can be found below the preview image below.
Demo: http://jsbin.com/ogesuf/5/edit
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#modal {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
overflow: hidden;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
}
#modal section {
padding: 10px 30px;
font-size: 12px;
line-height: 175%;
color: #333;
}
</style>
If you're willing to try jQuery ui you can simply use dialog to achieve what you want here is the link with more info.
http://jqueryui.com/demos/dialog/#default