I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image.
I've trawled google and cannot find an answer that works.
I am guessing I am missing something obvious and have overlooked it.
I feel like I can't see the wood for the trees.
Html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ablockalypse</title>
<meta name="description" content="Ablockalypse">
<meta name="author" content="Coming Soon">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<img src="images/cityscape.png">
<div id="header">
<img src="images/banner.png">
</div>
<div id="logo">
<img src="images/Logo.png">
</div>
<div id="info">
<img src="images/info_red.png">
</div>
</div>
</body>
</html>
Stylesheet :
body {
background-color: #746747
}
#container {
position: relative;
width: 800px;
height: auto;
display: block;
margin: auto;
max-width: 100%;
width: auto\9; /* ie8 */
}
#header {
position: absolute;
top: 20px;
left: 6%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#logo {
position: absolute;
top: 40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-transform: rotate(13deg); /* IE 9 */
-webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
#info {
position: absolute;
top: 450px;
left:290px;
width: 276px;
height: 134px;
background-image: url(images/info_red.png) no-repeat;;
}
#info :hover {
background-image: url(images/info_green.png) no-repeat;;
}
I would appreciate any help!
the last selector on your stylesheet, has a space that is causing it not to work.
#info :hover should be #info:hover
Related
I need to build a pie-chart like this.
pie-chart needed to be built
I am unable to use JavaScript(JS) for the pie-chart because the Outlook desktop version is not supporting JS.
I made a pie-chart only with HTML and CSS, but Outlook doesn't support some CSS properties like transform, clip...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email-template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p>Hello Allex</p>
<p>Here is the summary of you Work Item</p>
<div class="donut-chart-block block">
<div class="donut-chart">
<div id="part1" class="portion-block"><div class="circle"></div></div>
<div id="part2" class="portion-block"><div class="circle"></div></div>
<div id="part3" class="portion-block"><div class="circle"></div></div>
<div id="part4" class="portion-block"><div class="circle"></div></div>
<p class="center">320 total</p>
</div>
<div class="data-container">
<div class="data-row">
<span class="data-progress">Completed</span>
<span class="data-progress-value">10</span>
</div>
</div>
</div>
</div>
</body>
</html>
And
CSS, which I was trying to apply also as inline and internal CSS, because external will not work for certain I think.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
}
.donut-chart-block {
display: flex;
flex-direction: row;
align-self: flex-start;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center {
background: #fff;
position: absolute;
text-align: center;
font-size: 28px;
top:0;left:0;bottom:0;right:0;
width: 130px;
height: 130px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 15% 0 0;
}
.portion-block {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.circle {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#part1 {
transform: rotate(0deg);
background-color: #E64C65;
}
#part2 {
transform: rotate(100deg);
background-color: #11A8AB;
}
#part3 {
transform: rotate(150deg);
background-color: #4FC4F6;
}
#part4 {
transform: rotate(261deg);
background-color: yellow;
}
This is how it looks in the browser.
This is in the Outlook desktop version.
I also tried SVG, Canvas, and other things, and they don't work either.
VML (Vector Markup Language) VML is the last thing that I have tried, I am not sure is it even possible to make a pie-chart with VML, but one thing that stopped me from trying is that VML is now working in Outlook desktop, but it's not working in browser (Google Chrome).
On the Backend side, it is the C# .NET framework.
So does someone has an idea of how should it be done? Thank you in advance :)
i have succeded in making pure css parallax, it was hard ! ^^
But I got a problem.
To do the parallax we have to ad overflow-y : scroll propriety in order to scroll the block with perspective propriety from up to down.
The thing is that it force me to ad a ugly scroll bar, how could I remove it ?
Thanks ! :)
Here is my snippet:
*{box-sizing: border-box;}
body{
margin: 0;
}
.parent{
perspective: 200px;
perspective-origin: bottom right;
height: 100vh;
overflow-y: scroll;
}
.parent:before{
content:'';
position: absolute;
background: linear-gradient(white, #A00000);
height: 300vh;
width: 100vw;
}
section{
height: 50vh;
transform-style: preserve-3d;
}
span{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
height: 100%;
width: 100%;
position: absolute;
}
.firstChild{
transform: translateZ(-200px);
}
.secondChild{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
transform: translateZ(-100px) ;
}
.secondChild{
transform: translateZ(-300px) ;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> My website is not awesome.</h1>
<div class="parent">
<section><span class="firstChild"></span></section>
<section><span class="secondChild"></span></section>
<section><span class="thirdChild"></span></section>
</div>
</body>
</html>
Add this to your css to make the scrollbar invisible:
.parent::-webkit-scrollbar {
display: none;
}
I want to fill that empty background with color, also that background should be responsible with the image. Can be done with CSS?
You can use a background gradient(or an image), background-size, background-position and no-repeat to set it under the area of the screen.
example:
img {
background: /*linear-gradient(blue,blue)*/
/* choose the gradient for a color, see hover effect */
/* or use an image of the appropriate ratio */
url(https://i.picsum.photos/id/102/1129/751.jpg?hmac=uS-7B0eUG3Sd1mZHONp80fqhpDZ6g09ZoD7aw7l8tAo) 50% 1%/ 80% 80% no-repeat;
display: block;
margin: auto;
max-width: 70%;
filter: drop-shadow(0 0 10px silver)
}
img:hover {
background-image: linear-gradient(blue, blue);
}
html {
display: grid;
min-height: 100vh;
background: #444
}
body {
margin: auto;
}
<img src=https://i.stack.imgur.com/pu2YY.png>
filter can also be used if you want to add a shadow (or else) effect.
In the same as you used do background color using background-color property look at these image with transparent background with two different colors in the background color. the only difference is that the image you are using doesn't have the transparent background.
img {
background-image: black;
}
img{
background-color: blueviolet;
}
you want this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
position: relative;
}
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 447px;
position: absolute;
z-index: 1;
left: 168px;
top: 16px;
}
.img
{
position: absolute;
z-index: 0;
left: 8%;
}
#media (min-width:500px) and (max-width:900px){
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 452px;
position: absolute;
z-index: 1;
left: 96px;
top: 16px;}
}
#media (min-width:700px) and (max-width:1300px){
.bg-color {
background-color: rgb(177, 50, 50);
height: 251px;
width: 452px;
position: absolute;
z-index: 1;
left: 156px;
top: 16px;}
}
</style>
</head>
<body>
<div class="main">
<div class="bg-color">
</div>
<div class="img">
<img src="https://i.pinimg.com/564x/48/ce/e8/48cee83121a363a248640dbf54778d87.jpg" alt="">
</div>
</div>
</body>
</html>
I'm new to web developing, and I'm learning how CSS works as I go along.
I'm creating a fun template to pass time but I noticed my aligning isn't right at all. When scrolling out or resizing browser everything goes way out of proportion. Any help on what's wrong and or what to improve with what I'm doing (again I'm new, so sorry)
I've tried other solutions and I couldn't get it to work.
I directly linked my codepen example.
https://codepen.io/anon/pen/yxWvJO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OSRS - Template</title>
<link rel="icon" href="images/favicon.png" />
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="scroll-middle"></div>
<div class="scroll-top"></div>
<div class="scroll-bottom"></div>
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/IcgB_OzA_sE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="discordapp">
<iframe src="https://discordapp.com/widget?id=488699973156864030&theme=dark" width="350" height="380" allowcontrols="true" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
/*
* Defines the body & html attributes
*/
body,
html {
font-family: 'Helvetica', sans-serif;
background-image: url(https://www.runescape.com/img/rsp777/bg2.jpg);
background-size: cover;
text-align: center;
padding: 0;
margin: 0;
}
/*
* Defines the list attributes
*/
ul {
list-style-type: none;
margin: 1;
padding: 0;
position: absolute;
top: 25%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the list attributes
*/
li {
float: left;
background-image: url(https://www.runescape.com/img/rsp777/splash/button_small.gif);
top: 117px;
height: 63px;
margin: 5px;
position: relative;
width: 152px
}
/*
* Defines the list attributes
*/
li a {
display: block;
color: grey;
top: 25%;
text-align: center;
padding: 20px 16px;
}
/*
* Defines the list attributes
*/
li a:hover {
color: white;
}
::-webkit-scrollbar {
display: none;
}
.video {
position: absolute;
top: 500px;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
}
/*
* Defines the container attributes
*/
.container-right {
position: absolute;
width: 250px;
height: 250px;
border-style: solid;
border-width: 2px;
border-color: silver;
border-radius: 10px;
top: 50%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the title attributes
*/
.title-box {
text-align: center
}
/*
* Defines the logo attributes
*/
.logo {
background-image: url(https://vignette.wikia.nocookie.net/2007scape/images/4/41/Old_School_RuneScape_logo.png/revision/latest?cb=20170406224036);
position: absolute;
width: 250px;
height: 175px;
background-size: 250px 175px;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
animation: float 6s ease-in-out infinite;
}
.scroll-top {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-middle {
background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif);
background-repeat: repeat-y;
position: absolute;
width: 745px;
height: 800px;
top: 650px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-bottom {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
bottom: -429px;
left: 50%;
transform: translate(-50%, -50%);
}
.discordapp {
position: absolute;
bottom: -565px;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* Defines the flating attributes
*/
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
I highly suggest you try out CSS flexes and grids, your code is missing fundamental formatting so when you resize the browser doesn't really know what to do and just moves things around.
Before trying more complex techniques I'd suggest you try to minimize your CSS, using breaks in HTML and understanding how to efficiently and non-redundantly center elements in your pages.
All and all, that's not the worst start, good luck with your learning process!
I'll start from the end - unfortunately you can't except the same result with this code on every device. While it works on computer screens the problams start on smaller screens - mainly because you are using absolute position and pixels unites.
The solution can be either breakpoints (css media query) so you can style differently depend on screen sizes, or to use percentage values (with min-width values), but that is not recommend with that code.
It's a good practice not using frameworks and code by yourself. You should learn html and css in order to gain more tools. I suggest start with w3schools and mdn, but there are lot of other guides out there...
By the way - it look very nice on my laptop! Good luck, and the most important - enjoy coding!
I recomend you to see about CSS Flexbox and Media queries. this links with many tutorials/examples will help you to understand more about css and positioning. Because your code needs to adapt in every screen (mobile and desktops). your site looks good, keep coding!
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.