I can't find any information about this topic. I want a simple custom cursor with CSS. I have this code right now:
cursor: url('img/cursor_left.png'), auto;
It shows the cursor, nothing wrong. But it's blurry, because it isn't compatible for retina display. Anyone knows how to fix this?
Thanks, Angelo.
I haven't tested this, but it should be possible to use image-set:
cursor: url('img/cursor_left.png'), auto;
cursor: -webkit-image-set(
url('img/cursor_left.png') 1x,
url('img/cursor_left_hi.png') 2x
), auto;
Related
Hoping someone here has seen this before. I have a site that required me to remove the default bullet points and replace them in css, on every browser and mobile device it shows up the way I've style it to aside from IOS.
I've checked safari and chrome on my iphone 6s and in the list where I replaced the bullets with a white box it's changing it to a rather large box with a black gradient.
This is how it looks on a pc/android - the bullets are orange which is the desired colour
An this is how its displaying on all IOS mobile browsers:
This is the css that I'm using for the bullets:
section.specificationsSection ul li:before {
content: "\25AA";
font-size: 37px;
display: inline-block;
width: auto;
line-height: 15px;
margin-left: -.8em;
color: #f15822;
margin-right: 8px;
margin-top: 4px;
}
I'm stumped, I've looked around to see if anyone else has seen this, asked a few designers and developers with no luck, any help is welcome! thank you.
iOS may be replacing the "\25AA" entity with a black square emoji? (reference: https://www.iemoji.com/view/emoji/521/symbols/black-small-square)
We had this issue as well. We switched to "\25FC", which looks similar to "\25AA" and avoids the huge, beveled look on iOS. We've only needed to use it in black color, though.
I've got some CSS code in order to display the title attribute when touching on abbreviations and symbols of a smartphone's screen. Within a section '#media only screen and (max-width: 767px)' of my stylesheet I have the following code:
span[title]:active::after,abbr:active::after {
color: Maroon;
font-weight: bold;
content: 'Meaning: ' attr(title);
position: fixed;
top: 3ex;
left: 2ex;
display: block;
z-index: 100;
background-color: White;
box-shadow: .3ex .3ex .1ex Grey;
border: 1px solid grey;
padding: .4ex;
width: 70%;
height: auto;
}
It does work flawlessly on Android -I've tested it on Chrome, Firefox and Samsung browser- and my iMac -tested it on Chrome, Firefox, Safari and Opera after stretching the width of the browser's window, but it doesn't work on iOS at all! The trick/workaround of adding '-webkit-transform: translate3d (0,0,0);' added to the code did not help to this.
I should appreciate any help a lot!
Thank you very much indeed!
SOLVED!
I tried the solution as proposed in the following link: Enable CSS active pseudo styles in Mobile Safari
and it works fine. The problem was that Safari Mobile disables :active pseudo-class by default, and this simple idea solves it.
I tried some other working solutions, such as 'body ontouchstart=””' and similar ones, but all of them gave errors when checking the code against W3C validator.
Many thanks to all those that answered and tried to help!
The :active property only works on activabe elements. Documentation says:
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
So the most simple thing to do is to set the tabindex attribute to 0 for each element you want to be activable.
This has the big advantage that your code will work with keyboard.
EDIT: adding tabindex=-1 for all elements can be done easily with jQuery using
$("abbr[title]").attr("tabindex", -1);
or using standard javascript
var ele=document.querySelectorAll("abbr[title]");
for (var i=0;i<ele.length;i++) {
ele[i].setAttribute("tabindex", -1);
}
SELECTs OPTIONs seem to be nasty to get a hold on.
With something like this css-snippet i'm trying to visualize the category of an options-data.
option{
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 12px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 1px;
margin-bottom: 1px;
}
.type1, option[data-cat="T1"] {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEWazTL///9Sg7a4AAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA1VDA4OjI4OjQwKzAxOjAww0rpAAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wNVQwODoyODo0MCswMTowMLIXUbwAAAAASUVORK5CYII=');
}
In this fiddle i am adding simple images to a background of the OPTION-tag. FireFox and Chrome are showing these as expected but IE11 seem to be ignoring or hiding them.
Any way to make IE11 show (or fake) them?
There is quite a few reasons why this wont ever work.
and even more why you just shouldn't bother.
Basically Select & Option Box's are defined by the OS, User Specific Settings & the Browser.
This is for many reason one main reason being usability.
Styling the outer box etc is usually not a problem but the style with in the select or Option is just not even worth trying to edit.
If you want to create something like this that you have full control over I would advise you use List Items instead as they will offer the flexibility you are after.
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
Though in 1996 I had one of the top 5 Leonardo DiCaprio web-sites - I'm no programmer. So I tried using 4ormat templates to make my life easier but they didn't have an option for image rollovers so I had to change the css and of course its causing problems for me. It works fine in every browser - sometimes it even works fine in chrome! But if you load it a bunch the first few images on the page will load and then disappear! Its been great in every other browser! What am I doing wrong??
http://sarahcrump.4ormat.com/retouching
the code looks like this:
.rollover a{
display: block;
text-indent: -9999px;
margin: auto auto auto auto;
cursor: pointer;
outline: transparent solid 0px;
}
#erilynn a{
height: 550px;
width: 393px;
background: url('http://4ormat-asset.s3.amazonaws.com/resources/1327226/0x550_1329240086.jpg') no-repeat left top;
}
#erilynn a:hover{
background-position: -393px;
}
I know other people have run into this problem as well but have yet to discover a solution that works.. Anyone know whats up?
If you are using dev channel of Chrome, this seems to be a bug in Chrome (Webkit more specifically) than in your code.
You can check the bug report for Chrome at http://code.google.com/p/chromium/issues/detail?id=111218
I have personally hit this problem few weeks ago in my code and sadly couldn't find a workaround.