I want to increase a size of image which is used as cursor.
Currently i am not able to put image more than 128 by 128.
But i want to put it with more size.
so how to do that?
I am using
cursor: url(hand.png), auto;
You can combine css + jQuery if necessary, even if combining them is not always perfect:
JSFiddle example:
http://jsfiddle.net/n4Zbr/258/
Local example:
$(function(){
var $cursor = $('#huge-cursor');
$(document).bind('mousemove',function(e){
$cursor.css({
left: e.clientX - 15,
top: e.clientY - 15,
});
});
});
body, html {
width: 100%;
height: 100%;
margin:0; padding:0;
cursor: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"), auto;
}
#huge-cursor {
position: fixed;
border-radius: 10% 90% 50% 50% / 10% 50% 50% 90%;
background: yellow;
width: 200px; height: 200px;
border: 4px solid pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="huge-cursor"></div>
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
With CSS? I am afraid it can't be done. I think you should try to use some software which can edit icon file and re-size it.
You can use CSS (or JavaScript) to hide the 'real' cursor. Then create a div with the background and size of the new cursor which will reposition itself to where the 'real' hidden cursor is every time the mouse moves. Basically it will look like a real cursor but the disadvantages to this is that i don't think the hide cursor CSS property works in the browser Opera. If you are interested in this method, let me know I will post it up once I'm near a computer (not on an iPad)
Related
So here's the problem - i need an image to slightly change when the cursor is hovering on it. However, simply writing something like this in CSS styles:
img {src="";} img:hover {src="";}
seems to do nothing. Is there a solution to this problem using only HTML and CSS?
Thank you for your time!
You can use background-image property and change the url on hover
img {
height: 200px;
width: 200px;
background-image: url("https://pixy.org/src/477/4774988.jpg");
background-size: 200px 200px;
;
}
img:hover {
background-image: url("https://pixy.org/src/19/193722.jpg");
}
<img />
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
Notice that I need to declare the img source from the html (this will be dynamic), so i dont use background here.
HTML
<div class='some-form'>
<form>
<button>...<button>
<img id="some-img" src="something"/>
<input id="some-input"/>
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
z-index: -1;
//background-size: contain; //this does not work
//background-position: center right 50px; //so this will not work
}
How can I get the image to act like contain so that I can align it the way i want?
Keep your code as-is, but change #some-img from an img to a div (and specify width and height as needed based on the image dimensions). It's not possible (at least not in a simple way) to make an img element behave as if it was using background-size and background-position properties since img elements are not backgrounds. So in order to do so, you instead make the image a div with a background-image.
Since you are dynamically populating the image src, you can instead use inline styles to define a background-image on the div, as this lets you call a PHP or other server-side function to echo the image url (which you can't do in a CSS file).
So for example, keep the CSS you have now (but add height/width or other styles to the #some-img div as needed) but replace <img id="some-img" src="something"/> with something like this:
<div style="background-image: url(<?php theDynamicImageURL(); ?>);"></div>
or equivalent in whatever language or method you are using to populate the image dynamically.
There are better ways to do this as inline CSS is generally something that should be avoided, but the use in this case is not too dangerous but it'll work in a pinch and most other methods would either be equally sloppy or a lot more work.
If you include jquery, you can write a script to cheat this:
<script type="text/javascript">
height = $('#some-img').height();
width = $('#some-img').width();
src = $('#some-img').attr('src');
$('#sime-img').wrap('<div id="contain"></div>');
$('#contain').height(height).width(width);
$('#contain').css('background',"url('" + src + "')");
$('#contain').css('background-sizing','contain');
$('#some-img').css('opacity','0');
</script>
It isn't nice. You can do the same thing w/o JQuery, I just used it for convenience.
If I understand correctly, you're looking to constrain an image to the size of its containing element and center it vertically and horizontally.
This will get you pretty close, but the image will only scale up to its actual size, no bigger.
HTML
<div class='some-form'>
<form>
<button></button>
<img id="some-img" src="http://lorempixel.com/300/200/sports"/>
<input id="some-input" />
</form>
</div>
CSS
.some-form {
display: block;
position: relative;
width:400px;
height:180px;
background: rgba(255,255,0,.1); /* for checking that it fits*/
}
.some-form #some-input {
background-color: rgba(255,255,255,0);
border: 1px solid #2F2F2F;
width: 300px;
color: #000;
opacity: 1;
}
.some-form #some-img {
position:absolute;
background-color: #FFF;
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
max-width:100%;
max-height:100%;
z-index: -1;
}
fiddle: http://jsfiddle.net/XNR38/
Good luck!
Can I use CSS programmatic to put the attributes of my img tag?
<span><img class="img-dollar"></img></span>
<span><img class="img-royalty"></img></span>
I want to put src to get the image and put height and width to scale it down. How can I achieve?
The answer is No. You can't manipulate the html tags with the help of css. Use javascript for that.
CSS is only used for manipulate the style attributes.
To change the height and width property using css you can do something like this
.img-dollar
{
height:100px;
width: 100px
}
You can set the size of an image using css e.g.
img{
width: 200px;
height: 200px;
}
If you have div wrapper you can make the image take up the size of that div e.g.
.wrapper{
width: 200px;
height: 200px;
}
.wrapper img{
width: 100%;
height: auto;
}
You can fake the src using an image as a background e.g.
.img{
width: 200px;
height: 200px;
background: /images/image.gif
background-size: 200px 200px /* CSS3 */
}
You can find out more about background image size here http://www.css3.info/preview/background-size/
You can't alter attributes in CSS, only create rules based on attributes.
In your case, you can use CSS content property to set URL to image or inline Base64-encoded images as content of certain elements.
More information here: https://developer.mozilla.org/en-US/docs/Web/CSS/content and here: http://www.w3schools.com/cssref/pr_gen_content.asp
For example:
HTML:
<span class="img-dollar"></span>
<span class="img-royalty"></span>
CSS:
span.img-dollar:before {
content: url(images/dollar.png);
}
span.img-royalty:before {
content: url(images/royalty.png);
}
This will put image into your <span>.
You can't set the src but use the background to achieve a similar effect
img-dollar{
width:5px;
height:5px;
background:url(dollar.png);
}
Yes and No.
You can't add a src attribute using css. You could however use
Javascript for that.
a quick example:
$("img.imgNav").hover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
$(this).attr("src", src);
},
function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", src);
});
You can style the background-color and width/height with css.
img
{
background-color: #222;
width: 200px;
height: 100px;
}
for example.
You could give it a set with or height then use background:url();
Or, using JQuery, you could use $('img-dollar').attr('src', 'image.jpg');
Or, using pure javascript, you could use:
document.getElementById('img-dollar').setAttribute("src", "image.png");
To change any attribute of html element you need to use javascript or jQuery .
you can change image source in jQuery as
$(document).ready(function(){
$('.img-dollar').attr('src','imgpath/imagename.png');
});
and similar code to change other attributes
Here im setting the content and size of an image through straight css:
http://jsfiddle.net/nQxje/
.img-dollar{
content: url('http://woodgears.ca/box_joint/tiny_box_scale.jpg');
height: 100px;
width: 100px;
}
hope this works for you.
I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:
I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...
Can anyone offer me some help? Or perhaps point me to a resource?
Thanks!
You could use border-radius.
See my example on jsFiddle.
Mine is a cleaner version of #Alex's:
Live Demo
.head {
-webkit-border-top-left-radius: 40% 80px;
-webkit-border-top-right-radius: 40% 80px;
-moz-border-radius-topleft: 40% 80px;
-moz-border-radius-topright: 40% 80px;
border-top-left-radius: 40% 80px;
border-top-right-radius: 40% 80px;
background: blue;
height: 280px
}
<div class="head"></div>
It obviously won't work in IE.
You could use CSS3 or webkit-specific properties, but this is not well supported as far as cross-browser compatibility is concerned. If you want to support as many browsers as possible, your best bet would be to use a background image to achieve this effect.
Here's a cross-browser version, which i made with help of jquery. Basically, the script creates many spans, with white background and decreasing width.
You can play around with STEPS and FACTOR variables, which will change the result. The step function sets the easing of the curve. You may replace it later with better functions than mine, it's just an example.
var STEPS = 53;
var FACTOR = 5;
var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
tmpWidth = stepWidth(i, width);
$span.clone().css({
'bottom': i + 'px',
'width': tmpWidth,
'left': (width - tmpWidth)/2
}).appendTo($el);
}
function stepWidth(i, width){
return -(1 / FACTOR * Math.pow(i, 2)) + width;
}
You can find the entire code (html + css on the Fiddle)
Here is another way of achieving this.
Draw an overlay with pseudo element with width and height larger than element itself.
Apply border-radius to create round effect and background-color.
Add overflow: hidden on parent to hide excess part.
Output Image:
body {
background: linear-gradient(lightblue, blue);
min-height: 100vh;
margin: 0;
}
.box {
position: relative;
margin: 5vh auto;
overflow: hidden;
height: 90vh;
width: 500px;
}
.box:before {
border-radius: 100% 100% 0 0;
position: absolute;
background: white;
bottom: -200px;
right: -200px;
left: -200px;
content: '';
top: 0;
}
<div class="box">
</div>