Is it possible in HTML5, CSS3 and (most likely) SVG to create a shadow like the blue precent icon throws?
For example, a site content admin picks a picture for the icon (it can be a PNG with transparent border), and the markup with the rules give it a shadow like on the picture. The ideal variant would be a dynamic shadow that changes if we rotate or scale the icon.
You can get this effect by making several box/text shadows farther and farther away. Realistically, this would be very hard to code yourself, so you should probably use mixins or javascript. See this example: http://codepen.io/awesomephant/pen/mAxHz
Related
what is the name of this effect? Above the heading What is a sofbox? I mean the wave line, like
here.
It is also above the title Readymade Multi-use Landing Homepages here. I don't know what it's called, I can't find it.
How can I make this animated effect (from the second link) and responsive as it is on that page? Can anyone help? The ideal solution would be vuejs, if possible.
You do not necessarily need Vue.js or even js to achieve that. You can do it with just CSS.
In the first example, it seems to be simply an image (white wave) positioned :after the div with the background picture. It is on the top of the actual div, you can use z-index for that.
The second example is a bit funkier. It is SVG (white wave) that is animated to move to the left. So it could really be the same picture as from the first example but you would just add animation to move the element to the left infinitely.
Have a look here. I created pretty much the same effect with SVG.
Also, have a look here - you can customise your own wave easily.
Hope it helps.
I have been trying to make this PSD using CSS?
So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?
In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.
Ranting
The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.
I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.
There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.
This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.
EDIT
Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.
I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.
I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.
http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760
I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.
I'm a person that learns best from example. Currently, I'm diving into the field of Web Development after fifteen years of developing desktop apps. I'm still getting used to all the web technologies used for developing modern web sites and everywhere I look, I see cool little UI elements and question how they're implemented. So I thought I'd ask you, the web experts...the wexperts :)
What are some straight forward or creative ways you could code this grid-breaking arrow...
The basic layout for this page looks like...
What would the html/css code look like?
Would you split the image into multiple images or could you use a single image?
I'm sure this is a really simple concept and it completely boggles me. I'm sorry if this is a strange question, remember I'm a noob! :)
Thanks in advance for all your help!
Here's a link to the original tutorial where I found these images
If you look at your mockup the Header Panel includes the height from the top of the green box to the bottom of the box.
background: green url(images/header-bottom.jpg) no-repeat bottom left;
That jpg file includes that last 70 of so pixels in height including the whole arrow. Since your header and navigation are below where that arrow goes the containers will be exactly how you show it.
This also enables you to have Submenu and Content to just have background colors since the only gradient you seem to have in those two regions are in the same zone as the arrow in Header Panel.
You could make a rectangle image which is wide and short to handle it. Use the same colors as the rest of the page so that it blends in. Check it in all browsers to make sure the image renders the same as the html colors. With some image formats this is not the case at least in some browsers.
There are so many ways to do this... there are two or three ways that are better than most.
Here is an image of what Ballsacian and Sean are talking about. Ignore the black bits of the top of text on the bottom, imprecise screenshot taking on my part.
alt text http://img171.imageshack.us/img171/9392/picture6e.png
You can make the green part of the arrow transparent and save it as a gif or png, since the slope appears to be 45 degrees (no jaggies in GIF). You would still have to edit the image to match the subnav and content background colors if you ever change them, but the transparent triangle will automatically show the header background color through.
You would also have to remove the margins between the header, subnav, and content containers.
The Photoshop guy who made this clearly wanted the background to show through "naturally" by making the margins between the header and subnav/content, but that is impossible without un-semantic markup with the arrow. The way you could do this without even using CSS is to just put the image in right after the header, in between the header and subnav/content.
<header>
<img src="arrow.gif" />
<section class="subnav" />
<section class="content" />
Then make the line be transparent instead of the arrow. Now you would have to change the image if you ever changed the header, subnav, or content background-colors, but not the body background-color. This accomplishes what the Photoshop guy wanted in spirit, but is ultimately not as satisfying markup wise.
I can see that this concept is very awesome in photoshop, you only have to change the background colors of each of the sections and transparency takes care of the rest, cool! If you were confused as to how to do this and keep the Photoshop guy's concept true to itself, I don't blame you. It is impossible to do with basic HTML and CSS with images. Maybe with SVG you can do it.
For fun, here is the super-optimized sprite way of doing it. This requires you to put in a huge vertical transparent space between the arrow and the content top gradient. Then use this background on the UL of the subnav and the div/section of the content container. Set the background-position to 0 -(verticalspace + arrowheight) and repeat-x for the content. 3k single http request.
alt text http://img37.imageshack.us/img37/8503/arrowy.gif