I never forgot and always use shorthand for margin and padding because it runs clockwise, but how do you remember the others?
Do you use CSS shorthand wherever possible?
What are the best ways to remember different shorthands?
Update:
I also found 2 good shorthand Cheat-sheet.
Png - http://www.catchmyfame.com/wp-content/uploads/2009/07/CSS-Shorthand-Cheat-Sheet.png
PDF - http://www.eddiewelker.com/wp-content/uploads/2007/09/csscheatsheet.pdf
Here’s a decent CSS shorthand cheat sheet (PDF).
I personally am not good at memorizing such things, so I use the specific attributes, background-position background-image background-repeat etc. instead of the shorthand.
I find it's less error prone, and makes for more maintainable code: You can search & replace specific settings project-wide, which is impossible when using shorthand.
Use an editor that understands the shorthand syntax and gives you some degree of auto complete on them. I too don't need one that tells me margin goes top, right, bottom, left, but it is useful to have one that tells me the options for background for example.
Visual Studio does this - it won't be the right choice for everyone obviously, but if Visual Studio does it I'm sure there must be many others that do too.
I've previously had only the difficulty to remember the order to declare the a pseudoselectors link, visited, hover and active (it actually matters!). Here I use the LoVe HAte mnemonic for.
ctrl+T for new tab
ctrl+K for Google search bar
"css font shorthand" and
done!
Related
I wonder if its possible to use the browsers cursor as an image.
So for example that I could use somewhere on the page the resize image of the cursor.
I tried to find some answer to this, all I could find is how to use an image as a cursor.
And interesting enough,
Microsoft uses images to show the cursors:
https://msdn.microsoft.com/en-us/library/aa358795.aspx
Mozilla also uses images:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Which makes sense, since one might have complete different set of cursors (maybe even a broken set - not having all variants) defined in the Operating System. And so it wouldn't show what they actually wanted to show. So my hopes are still up that there is some way.
I suppose what I want is not possible, but I thought lets ask.
Maybe its very simple and I am really overlooking something I hope.
It is simply not possible to use the image which is used by the browser.
I'm trying to create a game that uses buttons (and text areas) that are semi-transparent (Alpha of about 60%). I can do almost everything I want in XHTML and CSS, except for these semi-transparent items. So I'm looking for the easiest way of creating semi-transparent images on my web pages.
Ideas so far:
Create PNGs with semi-transparent pixels. This is supposed to be possible, and there are well-defined interfaces for defining an Alpha channel using PHP and the GD package. Problem: I tried this, but the images were opaque in all the browsers I tried (Chrome, IE8, FF).
Do it in Flash. I know how to use Flash(*) from some work I did before I retired. Problem: Flash is priced for the professional developer, not the hobbyist.
(*) Well, Flash 8. But as I understand it, even with newer versions I can continue to create movie clips the old way, they just get translated into a bunch of AS. And it's supposedly possible to continue using AS2, although you can't mix AS2 and AS3.
Do it in Flex. Problem: interfaces best described as arcane. Even using suggestions from experienced Flex developers, trying to include code from another mxml file (other than as a class) was a PITA.
Use SVG. This looked promising. The SVG syntax is basically XML, the element tags are reasonably obvious, and the interaction of attributes only slightly arcane, and there are plenty of examples in the tutorial. But... about half of current browsers will not support using SVG in an <img> tag. You have to use <embed> That means you can't put it inside an <a> or <button>. Even using embed, I got what look like "broken image" icons in IE8.
As I'm writing this, I notice several items under "similar questions" that look promising. But when I look at them, they use attributes that are not mentioned in the CSS spec: opacity, filter:alpha, and rgba. When working in a complex language, I really prefer to have the complete language spec open in another window, or to have the equivalent dead-trees version (e.g., the O'Reilly salmon book Cascading Style Sheets, The Definitive Guide, which sits on a bookshelf next to my desk.
So I'm asking for recommendations. If the consensus is to use SVG, I'll post my code and see if people can tell me what I'm doing wrong.
The CSS "opacity" property is perfectly valid. It is part of CSS3, and is supported in all browsers (*).
http://caniuse.com/css-opacity
Or you can use semi-transparent PNGs, as Alvaro demonstrated. They should work just fine. Not sure what happened with your attempts, but you must have done something wrong.
Note for versions of IE <= 8, you need to use the "filter" property instead.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
I don't know what problem you have with PNG's. Imo the best and easiest option by far. And they look as they should in all browsers from my own experience.
check this out: http://jsfiddle.net/BDLYG/
(and here a code I need to add)
If you have most users with the 'modern' browsers, I would say go with SVG. If you do, post here, and I'll be glad to help.
Many thanks for all the useful answers. I'm currently using a combination of CSS and PNGs (generated via PHP). I could have gotten along with just CSS, but I decided I wanted to change the opacity of the background when the user hovers over the button -- but keep the text opaque. It's easy to change the opacity of the whole thing, but (as far as I can tell) not of just the background.
I also experimented with SVG, and it also works fine, but it requires extra computation so I chose the simpler (for me) approach of CSS and PHP. I'm already comfortable with those two languages, just needed to be introduced to the newer stuff in CSS3 and the one extra function call needed to make alpha work in PNGs generated by the PHP GD package.
I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.
To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.
There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.
However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.
What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.
Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?
Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.
I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.
<foreignObject xlink:href="external file url"/>
You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.
Your milage may vary with other UAs though and as you say Firefox has a different solution.
You can check out a plugin I recently made called AeroJS. It does exactly what you're looking for and supports everything but IE.
EDIT: My apologies for not not including a description of the plugin.
Basically, the way AeroJS works is by taking the HTML of a specified element (backgroundElement), the background image of a specified element (backgroundImage) and prepending them to the specified element. Then, using WebKit's blur filter, a specified amount of blur (blurAmount) is applied to the elements in the background. It's still in the early stages of development so bugs are expected. One drawback of using AeroJS is that it's almost entirely static. You can move around the element and everythung behind it will be blurred however any changes that happen to the original DOM will not be reflected in the blurred/copied HTML. Custom code will be needed for that.
If those properties only apply to the selected element, why don't you select them all?
Maybe with:
#myElementID *
So, I'm looking to do a background image in CSS using a sprite sheet. And just to be clear, no I am not going for this effect. I have a full sprite sheet, and I would like to take a 16px by 16px square on the sheet and set it as the background that will be repeated.
At some point in the future, I hope to be able to do this via spacial dimensions using media fragments in the URL parameter, but since this isn't supported yet I'm looking for an alternative. Is there any way to get this same effect via modern CSS techniques or hacks?
Some notes:
I don't need to support old browsers, just the latest FF or Chrome will do.
I would prefer pure CSS solutions. I can and will create a JS/Canvas solution with data:URI's if I need to but considering how many elements I may need this for, I would prefer to not have to do that if I can get better results via pure CSS.
Need to repeat in both x and y directions
Looking for solution that takes advantage of a single image in memory/cache so that I don't have to load the sprite-sheet for every sprite I want to insert
Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.
body{ background-image: -moz-image-rect(
url('http://placekitten.com/500/500'),
0,100,100,0
); }
Example at http://jsfiddle.net/47CMr/2/
There is only one method that falls under your conditions (the hardest one is the need to repeat): using the border-image.
The dabblet with the demo: http://dabblet.com/gist/1635890
The point is: you can mark the part that you want to use using the border-image-slice part of the border-image property. The syntax is a bit tricky, but using it you could create different repeating paterns from border-images. Also, when the needed parts are not on the edge, or when you need to repeat the image both on X and Y, you'll need a clip property, so you'll need a block to be absolute positioned. All these things work even in Opera.
But, there is one bad, bad thing: the rendering of central part of border-image is a kelly hell: there is a difference not only between webkit and mozilla, but even between the Safari and Chrome, so I added a lot of hacks there.
In conclusion: the goal can be achieved, but with a hell of a hacks.
So, I'd advice you to use the data:uri, 'cause there are no other ways to do this in webkits and Fx both (in Fx-only you could use the -moz-image-rect as mentioned above).
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole