I want to add an opaque button in such a way that I can see the background image and the button can still be clicked, like the sign-in button in the above image. How would I go about this?
Here is my HTML:
<html>
<head>
<title>Subjects</title>
<style>
body{
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title {
height: 62px;
width: 231px;
background-color:#446CB3;
border-bottom-left-radius: 25px;
margin-top: 81px;
margin-left: 28px;
}
</style>
</head>
<body>
<div class="title">
</div>
</body>
</html>
You mean like... a transparent link?
body {
background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
color: white;
border: 2px solid white;
padding: 2rem;
font-size: 3rem;
}
Transparent link
Or an invisible link?
body {
background: #ccc url('http://lorempixel.com/g/1024/768') no-repeat 50% 50% /cover;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a {
padding: 2rem;
font-size: 3rem;
opacity: 0;
}
Invisible link
A very simple way is to use rgba colors in background of your button:
background-color:rgba(255, 255, 255, 0.2);
Example:
<html>
<head>
<title>Subjects</title>
<style>
body{
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title {
height: 20px;
width: 231px;
background-color:rgba(255, 255, 255, 0.2);
border: solid 2px #fff;
border-radius: 4px;
margin-top: 81px;
margin-left: 28px;
color: #fff;
text-align:center;
padding:16px;
}
</style>
</head>
<body>
<div class="title">
Sign up!
</div>
</body>
</html>
set the button element an opacity property
https://www.w3schools.com/csS/css_image_transparency.asp
Related
i trying to make background-position animation like this:
<div id="topAreaContainer">
<a href="http://www.google.co.il">
גכעגכע גע גכעגכע
</a>
</div>
body {
background: #000000;
direction: rtl;
}
#topAreaContainer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 70px;
color: #ffffff;
width: 50%;
justify-content: center;
text-align: center;
}
#topAreaContainer a {
color: #ffffff;
text-decoration: none;
font-size: 1.5em;
background: transparent;
background: linear-gradient(to right, transparent 50%, #ffffff 50%);
background-size: 200% 100%;
background-position: left bottom;
transition: background-position 0.4s ease;
border: 3px solid #ffffff;
padding: 7px 25px;
margin: 0;
}
#topAreaContainer a:hover {
background-position: right bottom;
color: #78899c;
}
https://jsfiddle.net/Layfv2sj/
i tried to change the percent but nothing helped.
with english text its working fine.
what can i do?
Title is a bit of a mouthful. I've just started with CSS and am trying to achieve the effect a text overlay while the image is still transparent behind the text.
Below is what I've managed to achieve by snipping together various bits of code I've found. I am struggling to get the dark overlay the same size as the image. I haven't used any margin or padding on the overlay or image so have no clue why it's happening. I've also tried several ways to align the text so it sits vertically in the middle but have had no such luck.
.image-container {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.border {
border-radius: 50%;
}
.image-container .after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
border-radius: 50%;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
border-radius: 50%;
}
#title {
background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
display: flex;
}
h1 {
font-size: 80px;
font-family: sans-serif;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, .1);
margin: 0;
padding: 0;
letter-spacing: -1px;
line-height: 0.8;
}
<div class="image-container">
<img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
<div class="after">
<div id="title">
<h1><b>ONE<br>TWO</b></h1>
</div>
</div>
</div>
For the first issue You will not able to center the overlay on to the image because the image isn't actually 200px x 200px because there are transparent pixels around the image. so first crop the transparent pixels around the image and get it's real size. Then replace the 200px size in the css below to the appropriate size.
I have corrected your code snippet to be able to center the text by adding display: flex and align-content: center (for vertical alignment) and justify-content: center(for horizontal alignment),
I have also added overflow: hidden to the .image-container .after to prevent overflowed text and changed the text size to 60px for better visibility.
.image-container {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.image-container .after {
position: absolute;
display: none;
left: 0;
bottom: 0;
overflow: hidden;
color: #FFF;
}
.image-container:hover .after {
display: flex;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
border-width: 0px;
width: 200px;
height: 200px;
}
#title {
background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding: 0;
display: flex;
align-content: center;
justify-content: center;
width: 100%;
}
h1 {
font-size: 60px;
font-family: sans-serif;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, .1);
margin: 0;
padding: 0;
display: flex;
align-items: center;
letter-spacing: -1px;
line-height: 0.8;
}
<div class="image-container">
<img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
<div class="after">
<div id="title">
<h1><b>ONE<br>TWO</b></h1>
</div>
</div>
</div>
I created buttons that have a hover effect. The button fills from bottom to top with a background color white, and the text changes color. However, there is this weird line that appears at the bottom when the animation takes place. Any help would be greatly appreciated.
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
}
.to-top {
background-position: 50% 100%;
background-size: 100% 0%;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-size: 100% 100%;
background-image: linear-gradient(white, white);
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}
<div class="project-button">
<div class="to-top color-blue">Visit Site</div>
</div>
Try the following:
I think the problem has to do with how Chrome computes the animation. At times (depending on the frame) the white background is just a bit too small to fill the button revealing the black background (hence the flicker).
.project-button div {
position: relative;
display: inline-block;
padding: 1rem;
margin: 0 1rem 1rem 1rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid white;
border-radius: 15px;
background-image: linear-gradient(white, white);
background-repeat: no-repeat;
background-position: 0 -100%;
background-size: 100% 200%;
transition: background-position .5s, color .5s;
}
.project-button a {
color: white;
}
.project-button div:hover {
background-position: 0% 0%;
}
.color-blue:hover {
color: #51d0de;
}
/* Misc */
html {
background: black;
margin: 1em;
}
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div class="project-button">
<div class="color-blue">Visit Site</div>
</div>
</body>
</html>
Inspired by Transition background-color via slide up animation
Currently I'm working on a website for a community and its getting a bit difficult, I have a nice pink>orange gradient with a image below it with a opacity of 0.2, to show both. That looks like this.
As you can see, the logo also has the opacity. I already found something about the rgba-color, but that did'nt work.
How can I solve this problem? I want the image with the border to have a full opacity.
body {
background-color: #f2f2f2;
color: #404040;
}
div.navbar {
height: 600px;
background: rgba(255, 255, 255, 0.7);
background-image: linear-gradient(25deg, #ec008c, #fc6767);
margin-top: -10px;
margin-left: -5px;
position: relative;
width: 105%;
}
img.logo {
position: absolute;
margin-top: 4%;
margin-left: 25%;
height: 40%;
padding: 25px;
border: 25px solid #f2f2f2;
border-radius: 50%;
}
div.image {
position: relative;
height: 100%;
opacity: 0.2;
background-image: url("img/slide1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div.nav {
position: absolute;
bottom: 0;
margin-left: 600px;
margin-bottom: 50px;
}
a.nav-item {
color: #f2f2f2;
font-weight: bold;
font-size: 25pt;
margin-right: 50px;
text-decoration: underline;
}
a.nav-item:hover,
a.nav-item .active {
text-decoration: overline underline;
}
<div class="navbar">
<img class="logo" src="img/logo.png">
<div class="image">
</div>
<div class="nav">
<a class="nav-item">Home</a>
<a class="nav-item">Twee</a>
</div>
</div>
Use the background property for both image and gradient. then take your gradient from the rgba equivalents of your hex values (Chrome dev tools color picker is good for this).
body {
margin: 0;
}
div.navbar {
height: 100vh;
/*
IMPORTANT BITS:
- ADDED image and gradient to navbar background and
- REMOVED opacity
THE REST:
The rest was just to make the demo look better/simpler
*/
background:
linear-gradient(25deg, rgba(236, 0, 140, 0.7), rgba(252, 103, 103, 0.7)),
url(http://placeimg.com/1000/600/arch) no-repeat center;
background-size: cover;
position: relative;
}
.logo-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
height: 0;
padding-top: 25%;
border:25px solid #f2f2f2;
border-radius: 50%;
overflow: hidden;
}
.logo {
width: 90%;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
}
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="navbar">
<div class="logo-wrapper">
<img class="logo" src="http://placeimg.com/200/200/tech/grayscale">
</div>
</div>
</body>
</html>
Child can't override opacity of parent due to how opacity is managed by the browsers.
Simplest way to achieve this is to place the visual child after the parent and then use a negative margin-top to draw the child on top of the parent. You don't need absolute positioning.
.frame{
background-color: #AAAAAA;
opacity: 0.2;
border-radius: 13px;
padding: 21px;
color: #000000;
height: 73px;
}
.frametxt{
margin-top: -73px;
color: #000000 !important;
opacity: 1.0;
}
first question here so please be kind! I am designing a website and I've been asked to frame pictures in sine-like borders. So far I've gotten around to it by creating a container div with 3 divs: the first for the downward bend, the second is just straight (I'm considering the idea of removing it later on) and the third one does the upward bend.
Here's a screenshot of the current state
So this is the the current code:
.border {
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
}
.bord1 {
margin-top: 4vh;
height: 4vh;
flex: 1;
border-top: solid 5px;
border-color: #e4ae03 rgba(0, 0, 0, 0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
}
.bord3 {
margin-top: -4vh;
flex: 1;
height: 4vh;
display: block;
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
}
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3 bottom"></div>
</div>
I'm really trying to figure out how to get the last segment white, as it's created by rounding the bottom right corner, so the white background would have to be "outside" the div.
I know this might be a stupid question, but here it is! Thanks!
*Edit: Sorry everyone, here is an image of what I'm trying to do]2
It would need minor adjustments to the spacing, but something along these lines? (I used black/white backgrounds to show the sections, but these could be swapped or even made transparent.
body{background-color:black;}
.border{
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
background-color:white;
}
.bord1{
margin-top: 4vh;
height: 4vh;
flex:1;
border-top: solid 5px;
border-color:#e4ae03 rgba(0,0,0,0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
background-color:black;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
background-color:black;
}
.bord3{
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
background-color:white;
height:4vh;
}
.bord3-layer{
flex: 1;
height: 9vh;
display: block;
background-color:black;
}
<!DOCTYPE html>
<HTML>
<head>
<style>
</style>
</head>
<body>
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3-layer">
<div class="bord3 bottom"></div>
</div>
</div>
</body>
</HTML>
Ok, in the end I was able to fix the layout using a system of inner divs, here is how I handled it:
.container {
line-height: 1.5rem;
margin-top: -5vh;
padding: 0px 0px 0px;
padding-top: 5vh;
padding-bottom: 0px;
z-index: 0;
color: #b3b5b3;
background: -webkit-linear-gradient(left, #1b2716, #000000 80%);
background: -o-linear-gradient(left, #1b2716, #000000 80%);
background: -moz-linear-gradient(left, #1b2716, #000000 80%);
background: linear-gradient(left, #1b2716, #000000 80%);
min-height: 75vh;
}
.top {
box-shadow: inset 0 6px 0 0px #243c51;
}
.bottom {
box-shadow: 0 6px 0 0px #243c51;
}
.border{
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
}
.bord1{
margin-top: 4vh;
height: 4vh;
flex:1;
border-top: solid 5px;
border-color:#e4ae03 rgba(0,0,0,0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
}
.bord1-bot{
background: white;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
}
.bord2-bot {
background: white;
margin-bottom: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-bottom: 5px solid #e4ae03;
}
.bord3{
flex: 1;
height: 4vh;
display: block;
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
}
.bord3-top {
margin-top: 0vh;
background: black;
}
.bord3-bot {
margin-top: 0vh;
background: white;
}
.bord3-bottom {
background: white;
}
.bord3-layer-top{
flex:1;
height: 8.5vh;
display: block;
background-color: white;
}
.bord3-layer-bot{
flex:1;
height: 8.5vh;
display: block;
}
.bord1-layer-top{
flex:1;
height: 8.5vh;
display: block;
background-color: white;
}
.bot-bord {
background: -webkit-linear-gradient(left, #1b2716, #000000 240%);
}
.text-con {
padding: 2vw;
z-index: 2;
}
.image-within {
display: block;
background: yellow;
height: 200px;
z-index: 10;
}
.top-bord {
background: white;
}
<div class="container">
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3-layer-top">
<div class="bord3 bottom bord3-top"></div>
</div>
</div>
<div class="image-within">
</div>
<div class="border">
<div class="bord1-layer-top"><div class="bord1 top bot-bord"></div></div>
<div class="bord2-bot bottom"></div>
<div class="bord3-layer-bot">
<div class="bord3 bottom bord3-bot"></div>
</div>
</div>
</div>
The CSS is really messy at the moment, so I'll have to clean it up a bit and work on keeping all the items constantly aligned, but it's looking pretty good right now! Thanks LegendaryJLD!