I am in this situation:
I have to do rounded corners and shadow for some boxes on web design. So far I do not have all design and I don't know how many boxes I will have.
In this moment I have 2 different sizes on "width" and of course re-sizable on "height".
The question is:
Which technology you suggest to me to use in this situation ?
PS: Usually I go with css, making 2 or 3 images for boxes with same "width" size
But now I think: "Maybe it is an old style, already", too many css classes, not automatic ...etc ?
Maybe I can use Jquery (js) -- (which usually i try to avoid because it is kind of heavy not like css, but I have jquery included already ) and should I ?
To use css3, (but problem in IE7/8) ?
To use different way ?
What do you think guys, what is the best practice on this stage of implementation ?
Updated:
Because I am starting a new project I would like to now the best practice:
I am not stacked or cannot do this and I know as well several way/plugins in jquery or CSS3, question was not which plugin or how to hack IE, but "Should I use js/hacks, in my case?"
If I use, JS, I will not have pure css/HTML which is faster -- js is heavy -> MINUS
JS make more dynamically/easier and less HTML/CSS code -- ->Plus
I would like to have an advice about this stuff
Thanks
etc ...
Check out http://css3pie.com/ for limited CSS3 support in IE 6-8
Use CSS3 and let IE7 and 8 have square corners. It's the only sane way to go about it. There's all sorts of ways to use images and JS for IE7/8 but having done it more than once, I really suggest not.
Related
I'm using fancyBox3 in a project and I want to achieve the following:
I wanted to know if there is a CSS trick to achieve it or if it requires some math and calculation to make it fit perfectly?
Basically, there are two ways - using JS (there are ton of scripts, for example https://github.com/brunjo/rowGrid.js, https://haltu.github.io/muuri/, https://github.com/kombai/freewall, http://miromannino.github.io/Justified-Gallery/) or CSS.
The problem with CSS is that it is still not possible to create true "masonry style layout", but you can archive something similar, try googling for "masonry using css", you will find many articles and examples about this topic, for example, this one - https://medium.com/#andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
Have a look at masonry.js - it does all the calculations for you to make your images tesselate as you resize the screen etc.
I've discovered ways to transform css shapes using animations like the ones demonstrated here: http://matthewlein.com/ceaser/
Does anyone know if it is possible to get more advanced with CSS or other non-flash code, to create animations more complex - even along the lines of the effect you see when minimizing or maximizing windows on Mac OS toolbar?
Is that possible or out of the realm of possibility using css?
Thanks,
This should be enough to get you started:
http://jsfiddle.net/9BTPy/
Notice that I only made a sample for Firefox for simplicity. Otherwise the code would get too big. It is also not the effect from your question, but you should get the idea.
Also see the following links for documentation and other examples:
http://css3please.com/
http://www.w3schools.com/cssref/css3_pr_keyframes.asp
http://www.w3schools.com/cssref/css3_pr_animation.asp
Additional Notes:
If you really have to do it this way, you are off way better with jQuery-Animations. The support over the different browsers is better, and it may be even simpler to do the effect you describe. It's also way nicer to maintain. :)
I'd like to know if it's possible to reproduce in CSS/HTML the effect you see in this magazine, with an image floated between 2 columns of text and the text wrapping around it:
I know only modern browsers support 2-column layouts, so my questions are:
Can this be done in modern browsers? If so, how? We are essentially doing a "float:both" but ofc that directive doesn't exist....
Is there any backward compatible hack to sort of do it in older browsers?
Finally, if you can do this in HTML/CSS, I would think the image would still have to be square, so that the wrapping effect would not be as organic as it is here. Would it be possible to reproduce the effect exactly, rather than having the image square with whitespace, eg, to the left and right of Ron Paul's head? Would you have to slice up the image to accomplish that?
It's not easily doable (especially for dynamic text). All the techniques have various downsides.
Here's one possible technique for "float center":
http://css-tricks.com/9048-float-center/
For modern browsers, there's a jQuery plugin that can do it precisely:
http://www.jwf.us/projects/jQSlickWrap/
Here's the tedious, manual version that inspired the above jQuery plugin:
http://www.alistapart.com/articles/sandbags
Curvelicious Otherwise known as a ragged float by Eric Meyer.
Also Sandbags
I'm developing a web application that has a certain layout.
I'm mainly using CSS for styling the buttons and using divs and styling them for other layout items.
The problem is that sometimes I need a layout item to be non-rectangular.
Also- designing SVG is easeer and sometimes may produce better results.
My question is: should I use CSS always for the layout, and for instance- combine divs to achieve the non-rectangular effect- or should I use SVG for some of the layout items?
Also- what about the buttons- CSS or SVG?
Thanks!
Bear in mind that SVG isn't supported in older browsers. In particular, in IE8 and earlier. Using SVG will therefore limit your audience.
It is possible to rig older versions of IE to support SVG - there are a number of Javascript libraries which can convert SVG into VML, which was Microsoft's proprietary alternative to SVG. However, this does mean you're running Javascript code unnecessarily; you could cause performance issues in IE, or worse, it could load slow enough that the layout redraws after its loaded.
Therefore, for cross-browser compatiblity reasons, I would suggest not using SVG for your basic page layout.
Where I would use SVG is for graphs and charts, etc. For these, I would use the Raphael javascript library, which makes drawing SVG very easy, and also renders it as VML in IE, without you having to do any explicit conversion.
For creating non-square elements in CSS, there is a hack which uses the CSS borders to draw triangles and other shapes. This works in all browsers (with some minor caveats in IE6), so is great for creating spot-effects like marker arrows and speech bubbles.
See http://jonrohan.me/guide/css/creating-triangles-in-css/ for more info on this.
Great for spot effects, but should stress that I wouldn't recommend it for complex shapes; I have seen some people drawing entire pictures using it -- see http://www.cssplay.co.uk/menu/fivestar and other hacks on the same site -- but as I say, I wouldn't suggest actually doing this, except just to demo a hack like this guy.
Hope that helps.
[EDIT]
Per the OP's comments, he only wants to add a rectangular protruding part to a larger rectangular <div>, so in fact the shape he's trying to create isn't all that complex after all; in fact, it sounds a lot like a tab. Given this, the best recommendation by far is to forget about drawing it with SVG, and simply create two divs: one for the main content and one for the tab. If necessary, a third div can be created to wrap the other two. This may be helpful for referencing the two others together via CSS or Javascript.
I tend to advise you not using SVG for the layout, it's not really its purpose. It's best suited for diagrams, pictograms, charts or maps etc.
using SVG will have disavantages:
-First, support: IE<9 doesnt support SVG, or you'd need an external plugin.
-Integration: it's easy to have SVG inside HTML, but emmbeding HTML in SVG is quite unpractical.
-flow in layout: you can draw shapes easily, but placing blocks/text has to be done manually. in html two consecutive blocks will be displayed one below the second. In SVG you have to place them absolutely, ensure text inside them isn't too long cause their size won't adjust automatically.
I'm almost sure it would be easier to layout with HTML+CSS. And now with CSS3 you can rotate blocks, round borders, cast shadow. I would like to know which particular layout cause you problems.
We are in 2017 now, I belive that all major browsers support SVG.
So I would say SVG is a good option. You will probably need to use JavaScript to adjust elements on the screen and make them responsive, because SVG does not provide things such as flexbox, tables, float, etc. The advantage with that is that you will have more flexibility and will not have to deal with the limitations and side effects of CSS.
What's the best, most robust CSS-button definition?
Ideally, I'd like gradients, rounded images, and graceful degradation down to IE8. It would also be great if the buttons didn't use any images, and the buttons scaled horizontally to fit their content.
What's the best solution to this?
Use the tools at http://css-tricks.com/examples/ButtonMaker
It is possible to use gradients, box-shadow, border-radius, rgba colour et cetera in older versions of Internet Explorer, using CSS3 PIE. Look at their demo with all these CSS3 properties.
Now, combine CSS3 PIE with the button maker mentioned in the comments and you're done!
Huge fan of JQuery UI buttons. Demo is here
Yes, they do use some images...but the images are also common to the many other features of JQuery UI, which offers your page some amazing features (and more coming all the time) It does gracefully degrade, and you can extend it to round in IE via another JQuery plugin. My favorite part is ThemeRoller, which allows you to build a page using themeroller capable plugins, then style or change at will, even with a tool that floats over the site. You could easily include a way for your user to switch the entire theme of the site with a button click. Plus, there's an editor to easily make your own themes if you don't like what's there.
As for gradients, you have fade up, fade down, curved fade, patterns, and then "build your own" options with variations of those and more plus color overlays and opacities.
Setting up a button is as easy as: <button class="ui-state-default ui-corner-all" type="submit">Button</button>
There is no way to do what you're asking with CSS only, as gradients and corners were only added as of CSS3 and even now they are still not fully supported.
The best way to achieve gradients now is to use an actual image, you can then be assured that most if not all browsers will support it (if you're using a .png image, IE6 may have an issue with it but there are CSS hacks to get around it).
Rounded corners can be added to the site in two different ways:
The first is via images and you would place these at the corners of the element giving the rounded appearance. What I've said before about .png images still applies here.
The second method is to use JavaScript. Most frameworks will have plugins designed with Web 2.0 features in mind. I recommend jQuery as it's easy to implement.
Out of the above two methods the first one is preferred if you want to make absolutely sure that the users can see curves, however if you aren't too concerned about them having JavaScript disabled I would definitely use jQuery as it's 100 times easier to use.