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;
}
Related
I am learning HTML/CSS for school.
I wanted to create a bar menu that if someone hover one button shows the blue bar (see snippet) and it creates below a Box for a Dropdownmenu. The Problem I get it only to work for one object the second one gets ignored even if I put my second object into so that both balken and Dconfig are directly under the button-class.
I really dont know how to solve it and it.
I hope you can help me :)
header {
background-color: black;
height: 70px;
width: 100%;
}
/*ButtonsCSS*/
.button{
height: 73px;
top: -2px;
background-color: transparent;
background-repeat:no-repeat;
border-color: transparent;
cursor:pointer;
overflow: hidden;
outline:none;
font-family:Arial, Helvetica, sans-serif ;
font-size: 12pt;
color: white;
position: absolute;
}
.balken{
opacity: 1;
}
.button:hover + .balken{
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
position: absolute;
top: 66px;
}
.UeberCG{
left: 470px;
border-right-width: 17px;
}
.balkenUeberCG{
width: 80px;
/**/
left: 475px;
}
/*DropdownCSS*/
.Dconfig{
opacity: 1;
}
.button:hover + .Dconfig{
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top:70px;
}
.DUeberCG{
left: 470px;
}
<!DOCTYPE html>
<html lang="de">
<body>
<header>
<div class="Buttons">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
</div>
<div class="Dropdownmenue">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</header>
</body>
</html>
I hope so I understanded your requirements well. On button hover you want to show Dropdownmenu? If that is the case you have to wrap everything into one parent div, applying hover on that div will trigger actions on children divs (this is the only possible way with pure CSS while in Javascript it is different and html elements can be in different places).
Here is an example of how I figured out your requirements.
.Buttons {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
.button-wrapper {
position: relative;
}
.button {
outline: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: white;
background: none;
display: block;
padding: 10px 20px;
cursor: pointer;
}
.balken {
background-color: rgba(108, 155, 243, 0.945);
height: 4px;
opacity: 0;
visibility: hidden;
}
.button-wrapper:hover .balken {
opacity: 1;
visibility: visible;
}
.Dropdownmenu {
background-color: rgb(223, 217, 217);
width: 300px;
height: 300px;
position: absolute;
top: 100%;
visibility: hidden;
opacity: 0;
}
.button-wrapper:hover .Dropdownmenu {
visibility: visible;
opacity: 1;
}
<div class="Buttons">
<div class="button-wrapper">
<button class="button UeberCG">Über CG</button>
<div class="balken balkenUeberCG"></div>
<div class="Dropdownmenu">
<div class="Dconfig DUeberCG"></div>
<div class="Suchleiste"></div>
</div>
</div>
</div>
I hope so this is what you need.
I am trying to build a basic website with CSS and HTML. I have right now adjusted the code in the following file to shrink the images down to displayable size. But let's suppose i tried decreasing the width of my browser(i am using my laptop) the contents get reorganized and the text moves below the picture as expected. But the problem i am unable to scroll down. I have tried various solutions like setting overflow of html to scroll, setting overflow-x property to hidden in html.
<!DOCTYPE html>
<html>
<head>
<script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>
W3Coders
</title>
<link rel="stylesheet" href="better-style.css">
</head>
<body>
<div class = "topping">
<h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
<h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
<img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
</div>
<div class="navbar">
Home
Resources
Skills
Rate
Contact
</div>
<div class="contents">
<img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
<h1>Purpose Of Existence</h1>
<h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
<h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
<h1>Random stuff cuz i have idea what do with space:</h1>
<h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
</div>
</body>
Here is my CSS file:
.topping
background-color: white;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 9%;
color: rgb(92, 84, 84);
padding: 0%;
}
.navbar{
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position:fixed;
top:68px;
left:0px;
}
.people{
background-color: rgb(58,118,209);
overflow: hidden;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.navbar a{
float:left;
color: white;
padding:14px 26px;
text-decoration: none;
text-align: center;
font-size: 17px;
}
.people a{
float:left;
color: white;
padding: 14px 26px;
text-decoration: none;
text-align: center;
font-size: 15px;
}
.navbar a.active{
color: white;
background-color: rgb(58,118,209);
}
.people a.active{
background-color:black;
color: white;
}
.navbar a:hover{
color: white;
background-color: cyan;
}
.people a:hover{
color:white;
background-color: rgb(92, 84, 84);
}
.contents{
background:url("images/background.jpg");
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
}
.card{
background-color: white;
width: fit-content;
color: black;
padding: 20px;
margin: 10px;
border-radius: 5px;
border-width: 10px;
float: left;
border-color: black;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
border-radius: 10px;
border-width: 3px;
border-color: grey;
border-style: solid;
animation-name: links;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes links{
0%{
border-color: grey;
}
25%{
border-color: red;
}
50%{
border-color: green;
}
100%{
border-color:blue;
}
}
I am using github pages to host my site: https://godofgames0070.github.io
Also, i am using Google Chrome to view my site.
from the live link I think it will help to amend the below:
//content will be scrollable
.contents {
background: url(images/background.jpg);
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
overflow: scroll;
}
Navbar looks squeezed too, I have updated the top style, so it fixed and not hidden. Try the below:
.navbar {
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position: fixed;
top: 9%;
left: 0px;
}
You're content has a CSS property position: fixed applied. You'll need to remove that in order to scroll your content.
If you are looking for a fixed background effect, consider background-attachment: fixed instead.
You can put your img in the contents with float: right to start and after reducing the screen using a media query to change the float
something like this :
.contents{
background-image: url("images/background.jpg");
width: 100%;
margin-top: 100px;
height: 85%;
}
.contents>img {
width: 30%;
float: left;
}
#media screen and (max-width:1000px) {
.contents>img {
width: 100%;
float: none;
}
}
I am trying to center text in photo. It works in chrome/mozilla perfectly, though there are problems with Safari.
Here are screenshots of the div from different browsers:
Safari:
Chrome:
When page is refreshed on Safari the text is often centered.
I dont have any ideas how to fix that.
HTML:
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1 > Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>
SCSS:
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: background-color 0.3s;
}
&:hover::after {
background-color: rgba(0,0,0,0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width:80%;
margin: auto;
padding-top: 80px;
padding-bottom: 40px;
color:rgba(white, 0.8);
text-align:center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
h1 {
font-weight: 1000;
color: white;
}
Expected behaviour: subCategoryName class is always centered in any browser.
Outcome: subCategoryName class is more to the right in Safari sometimes.
Try this,
Add the property
margin: auto;
to the container div ie, the parent div where all your sub divisions are contained.
also provide,
text-align: center;
to the actual element to be centered.
if nothing works, a <center>...</center> tag may help.
You can also refer this link for details.
You can use this code
body {
margin: 0px;
}
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
}
#giftsHeaderPhoto::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
}
#giftsHeaderPhoto:hover::after {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width: 80%;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 40px;
color: rgba(white, 0.8);
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
}
h1 {
font-weight: 1000;
color: white;
text-align: center;
}
.intro_block {
text-align: center;
margin: 0 auto;
}
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1> Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>
When I implemented the background in CSS, it covered the whole page but the length wasn't big enough to cover the content I wanted to write in it. I researched and found a background repeat-y, which I thought would copy the background again, making the page longer. When I code background-repeat: y; }
into CSS, it gives me the length I wanted, but splits the background so it doesn't cover the whole page. Most of it is white. What am I doing wrong? Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<b><h2>The beginning of coding:</h2></b>
<img src="runescape.jpg">
</div>
<p></p>
</body>
</html>
CSS:
body {
background-image: url(halftone.png);
background-repeat: repeat-y;
width: 1000px;
height: 4000px;
}
h1 { font-family: 'Lobster', cursive;
color: black;
position: absolute;
top: 25px;
left: 540px;
text-decoration: underline;
}
h2 {font-family: 'lobster', cursive;
color: black;
position: absolute;
top: 540px;
left: 480px;
text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
font-size: 20px;
color: white;
position: absolute;
top: 300px;
left: 320px;
display: 0px auto;
}
#runescape {
position: absolute;
top: 500px;
}
#pagesize {
max-height: 10000px;
}
#ben {
position: absolute;
top: 130px;
left: 290px;
width: 700px;
height: 400px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#cameron {
position: absolute;
top: 285px;
left: 220px;
}
#pastcoding {
position: absolute;
top: 100px;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Try background-size:cover; to your body
Yeah background-size:cover; is a enough option. But may be it doesn't view your image completely as expected. Best option to accomplish your task is that the image should re-size proportional to your body size and use background-size: (width)px (height)px; in your body styling. But this is only applicable to fixed size body. Unless it won't be pretty. :-)
Try background-repeat: repeat; and min-height: 1080px; to body in css and change 1080px to as required to you.
I have a some text on image, but the problem is i am using opacity so that text gets highlighted but it makes images look very dull.
Here is Updated Fiddle Link
Html
<div class="subcontainer">
<img src="http://i58.tinypic.com/11kbnlf.png" alt="">
<h3 class="header3">Motivate Yourself</h3>
</div>
CSS
.subcontainer {
width: 100%;
height: 100%;
float: left;
position: relative;
border: 3px solid white;
}
.imgcolumn {
background-repeat: no-repeat;
float: left;
width: 60%;
height: 80%;
margin-left: 130px;
margin-top: 45px;
position: absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
}
Is there any other way i can highlight text by keeping image as it is.
Note : I am trying to achieve something like this PAGE and i don't see image being blurred or having opacity.
use this fiddle
eg:
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
text-align: center;
position:absolute;
width:80%;
height:45%;
background-color:rgba(0,0,0,0.4);
top:20px;
left:24px;
line-height:150px;
}
You could also set the background-image of the parent container then lay another element over top of it with a semi-transparent background color as I have done here. Then, the highlight can be controlled via the opacity of the BACKGROUND of the overlay layer without affecting the text opacity.
http://jsfiddle.net/xDaevax/8Mzh9/
.subcontainer {
border: 3px solid white;
margin: 0px auto;
background: url("http://i61.tinypic.com/2ur6rk1.png") no-repeat center top;
height: 225px;
}
.imgcolumn {
width: 60%;
display: table;
height: 100%;
margin: 0px auto;
border: solid 1px #000000;
background-color: rgba(255, 255, 255, .6);
}
.header3 {
color: black;
font-size: 25px;
text-align: center;
position: relative;
top: -120px;
}
HTML
<div class="subcontainer">
<h3 class="header3">Motivate Yourself</h3>
</div>
The page you gave as an example uses contrasting colors for text and image. For example, that page uses dark images and the text on them is pure white.
If you want the text to stand out, use contrasting colors, or else use a contrasting drop shadow/outer glow (made with image editing software like PhotoShop), or add a semi-transparent background like this: http://jsfiddle.net/P22Cg/
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
background-color: rgba(255, 255, 255, 0.5); /* I added this... */
padding: 5px; /* ... and this */
}