I am trying to use css shapes instead of images wherever it seems appropriate.
Currently i'm aiming to add a white triangular shape to the end of my <li> links like so:
Here's a JSFiddle for you to tweak.
I've been with it for a while but as a novice developer I haven't been able to find an approach! The navigation bar stuff is at the bottom of the css and the html. I'm trying to keep the result responsive by using em and percent where possible and really this triangular shapes height needs to be the same as the nav_option class (which can double in height if the texts gets knocked onto the next line by window adjustment)
Any advice / solutions? Much appreciated!
Edit: if this is not possible due to my relative font-size then please detail an alternative solution? Suggesting the use of Javascript is helpful but a bit to vague for a novice like me.
Because you are using the border hack to make this shape, the measurement you need want work with, font-size, cannot apply. You will need a JavaScript solution to detect line-wrap and adjust the border dimensions accordingly.
The font size is relative with font-size of ascendant element, doesn't with width or height of parent element. So, to use responsive font-size, try to use some jquery plugin (FitText) or build a your JS.
http://fittextjs.com/
Related
I use the following code: bootstrap Circular progress bar using custom CSS and JS
To get a beautiful circular progress bar, but the problem, I want to make it bigger, it appears small, and when trying to do that, it becomes bad, and this is a mistake from me, is from someone who helps, please :)
Thank you, I know that the solution will be simple, but I'm not a professional in CSS
Any way to make it big with CSS?
Bootstrap circular progress bar has hardcoded values inside to be always 100px x 100px.
the easiest way to make it bigger is to use transform:scale() and make final chart rescaled to proper sizing.
See example fiddle: https://jsfiddle.net/ywoat4s2/26/
The downsides of this solution is that after scaling chart may be larger than surrounding box, scaling happen as a last thing in rendering so you need to be careful to not overlap container which wraps charts.
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I'm trying to understand why on a webpage I'm working on the image stops scaling once it reaches a certain resolution. You'll see what I mean if you manually adjust the browser size here: http://bit.ly/1nnzqeB
Can anyone help deduce what is causing this?
Because the maximum zoom percentage is limited. In case of chrome it is 500%
Sorry to say, but it may be impossible with your current approach.
I highly recommend going for an approach without using the CSS attribute of background if you always want it to be 100% of the view-port width. Use an img tag instead. You are already using Bootstrap (by the looks of your demo). So use an img tag and give it the class of img-responsive.
DEMO WITH BOOTSTRAP
Here is an example with your image and how you could implement it into your project. If you need to place any text over the image (like in your example), just make the div or heading tag have a higher z-index with either a position relative or absolute. I can provide an example if you need it.
DEMO WITH YOUR IMAGE
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/