I am trying to mask an image using CSS and the WebKit property ( -webkit-mask-image ) .
But due to some reason, the mask doesn't work when I use it from local files on my PC or even when I upload it to a website of mine and use the link. If I use the mask image directly from the tutorial website I followed the mask works fine.
In the below code you can see I have commented out a webkit-mask-image and if you run the code as it is you would see nothing whereas if you uncomment it and comment out the second webkit-mask-image it would start working. Same thing happens if I use the file path of my PC instead of the tutorial URL.
Please help me out with this. seems really weird.
<!DOCTYPE html>
<html>
<head>
<style >
html, body {
height: 100%;
}
img.two {
height: 50%;
width: auto;
}
.mask4 {
/*-webkit-mask-image: url("https://d33wubrfki0l68.cloudfront.net/d319533ac3d22c3186498254e0caee871796a29e/d7ce9/images/css/masking/image-mask.png");*/
-webkit-mask-image: url("https://3dmetalart.com/wp-content/uploads/2020/05/image-mask.png");
-webkit-mask-size: 400px 600px;
}
</style>
</head>
<body>
<h1>Image mask using png </h1>
<img class="two mask4"src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg"><br>
</body>
</html>
Related
Padding property started behave strange (in browser) after i had tried to create one-page scrollable website. Basically initially I had my index.html file linked to the styles.css file. I wanted to create one-page site so I googled it and found this site:
https://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
I followed the instructions: created side-bar and some sections to test it, but without using js script. It all worked perfectly except 1 thing: titles in side bar werent highlithing when scrolling, so I tried to implement the script (I created new file and paste the code from tutorial) and this is the part when it started to behave strangly: basically my title which was located also in side bar got much larger and padding around all page elements appeared. BUT THATS NOT ALL: that padding is still there (even after I deleted all elements and created everything from scratch), which I suppose shoudnt be there.
I want to get rid of it. Here is screenshot from my browser:
here
On the screenshot you can see 1 elemeent with some text. The thing is that I suppose that this text should be in the very top left corner but it is not.
Here are my index.html and styles.css files:
HTML:
<!doctype html>
<html>
<head>
<title>RA TOOLKIT</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav-menu">eha</div>
</body>
</html>
CSS:
body{
background-color: red;
display: flex;
flex-direction: row;
padding-top: 0px;}
.nav-menu{
background-color: white;
transition: all .2s;
width: 25vw;
min-height: 100%;
box-sizing: border-box;}
.nav-menu:hover{
background-color: greenyellow;}
Thanks in advance!
(sorry for my english : D )
When I tried to inspect element the page, i found that your html body has an 8px margin that you thought was the padding. I don't really know what caused this, but you can just overwrite the styling by giving a
body {
margin: 0px
}
to your html body. You can always use inspect element to figure out your final style render of your page
I am just beginning to learn HTML and I need help with making an example I found. Here is an image (link):
I know how to make the black background but I have no clue how to add the body in the middle of the page! Extra Information that was provided to me:
Color Code: #fe9;
Font: "Palatino",serif;
Width is 400px;
If anyone could help out even the littlest bit I would appreciate it! It also uses the embedded style!
What you can do is create a div inside your body tag. And then apply css to that div.
Say give it margin: 0 auto;
You need a containing element, usually a div. All your content should be inside this div. Then you can style the div to be a set width and centered, and give the div a background, etc.
Example:
<html>
<head>
<title>Test</title>
<style>
#container {
width: 400px;
margin-left: auto;
margin-right: auto;
background: #fe9;
font-family: "Palatino",serif;
}
</style>
</head>
<body>
<div id="container">
My Content
</div>
</body>
</html>
You should be able to figure out the rest of the content; if you can't, please ask specific questions about what you need to do and give details about what you have already tried.
I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}
EDIT 10:04 PM I RESOLVED THIS
Yeah I figured this out, but the forum software here doesn't let me post an answer to my own question until 8 hours have elapsed. Anyway, I found the solution here. It uses a pure HTML approach and I tested it successfully in all 5 browsers. Just had to put in the HTML: <img src="starter1.jpg" onmouseover="this.src='starter2.jpg'" onmouseout="this.src='starter1.jpg'" />
I'm trying to set up a page (eventually several pages) featuring this:
1) A default image loads when the page loads.
2) When you mouse over, a slightly different image loads.
3) When you move away from that, it goes back to the original image.
I figured this was easy with a little CSS, and it is, except when it comes to Internet Explorer. Here's what I have (it just shows 2 pictures of a broken starter from my car):
<html>
<head>
<style>
#pic1
{
width:500px;
height:500px;
background:url("starter1.jpg")no-repeat;
}
#pic1:hover
{
background:url("starter2.jpg")no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
It works just fine in Firefox, Chrome, Safari, and Opera, but not in Internet Explorer 8. In fact, in IE8, neither image loads. I just get a blank white screen. Am I missing a detail? Is there a way to get this to work on all browsers? I read something about wrapping it in an anchor tag but that didn't do anything either.
EDIT:
I can't seem to comment on any post without the code looking terrible, so here goes. I tried this:
<html>
<head>
<style>
#pic1
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
#pic1:hover
{
width: 500px;
height: 500px;
background:url(starter1.jpg);
no-repeat;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
</html>
Now the first image shows up but the hover over image doesn't. IE keeps telling me "To protect your security, Internet Explorer has blocked this website from displaying content with security certificate errors." as soon as I open up (IE, before going to the page with my pictures), then asks if I want to view only content that was delivered securely. I always just say "No".
Lastly, if I try this:
<html>
<head>
<style>
#pic1
{
background: #FFFFFF url(starter1.jpg) no-repeat fixed center;
}
#pic1:hover
{
background: #FFFFFF url(starter2.jpg) no-repeat fixed center;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
I get nothing at all, no images of any kind in any browser.
You need to use proper syntax. Here is the proper syntax.
element {
background:
#fff
url(image.png)
no-repeat
20px 100px
fixed;
}
Notice there are no double quotes ("")
I would like to be able to click on an image on one of my blog pages and then have that start up some embedded content.
Specifically, I would like to create a cover image for this Space Invaders game, found here: http://arcade.gameex.com/playgame/6135/space-invaders.html
embed code =
<iframe src = "http://arcade.gameex.com/embed.php?id=6135" width="480" height="360" />
I would like to click on my custom cover image in the page and then have the game start up, but I have no idea how to do this.
I've used wordpress for a few years now, but only doing minor style tweaks... nothing like this.
Any help for a beginner would be much appreciated! I am not an experienced programmer.
-C
Here's how you might do it with jQuery, a JavaScript library:
http://jsfiddle.net/SMM2B/
<style>
#cover {
width: 480px;
height: 360px;
background: url(image.jpg) left top no-repeat;
}
#game {
display: none;
width: 480px;
height: 360px;
}
</style>
<div id="cover"></div>
<div id="game">
<object>...</object>
</div>
<script>
$(function() {
$('#cover').click(function () {
$(this).slideUp();
$('#game').slideDown();
});
});
</script>
Note that you will need to configure WordPress and your editor to allow JavaScript and objects or iframes. If you don't already have jQuery available on the site, you could use this tag to load it from Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>