Just wondering how you would go about creating the effect as seen in the following image:
Image
The part i'd like to attempt to recreate is the gradient within the text field itself along with the line border surrounding the text box.
Thanks.
This can also be done using CSS3, reducing the need to load images. The problem, of course, is that it can become a little tricky cross-browser.
Heres a demo: Demo
Heres a tutorial on reproducing the demo: Tutorial
You can just set the CSS attributes on the input element in question. background-image for the gradient and border for the border.
Related
Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?
I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.
Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.
Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/
You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.
What you need to do is create a div with a class, then modify the div's shape and had a border on it.
I am working on a basic website and have a question. I used an image as the background and a text box to make the wording stand out, the text box I set as opaque. I wanted to add a picture to the text box but it is opaque too. How would I set the picture to be solid in an opaque text box?
Thanks for the help!!!!
In general, a child element will take on the properties from it's parent element. You can override the parent property by giving the image it's own property. However the css opacity property has some unique properties and does not work as expected.
see this popular question for work arounds that may work for your specific problem:
How do I give text or an image a transparent background using CSS?
What I want to achieve is located here: http://www.ppp-templates.de/tilability/ ..You see the left and right triangles near the slider, where the arrows are supposed to be...
right now I have that div set up here, with a white background http://teothemes.com/wp/. On that website a background image was used, but I want to do it via CSS
Something related is here, for the footer triangle: Make a CSS triangle with transparent background on a div with white bg image?
I tried to do the same thing, but it didn't work..
Any help is greatly appreciated.
The first thing you can do is create two squares with background same as the background of the website and then rotate them 45deg using transform: rotate(45deg) with vendor prefixes. Then just set the content div's overflow to hidden.
Something like this that I just created: http://cssdeck.com/labs/hggee4eg
Explaining the process here proved to be quite difficult, so I created a fiddle which goes through each of the steps needed to achieve this, each with a small legend.
Here's the fiddle - http://jsfiddle.net/NXmge/3/
EDIT
- I misunderstood the question. Here's the fiddle with the solution to the actual problem: http://jsfiddle.net/joplomacedo/UJyAY/
The previous fiddle still remains useful as it helps understand what I did with on the second fiddle. I'll also update my answer as soon as I can too directly include a general explanation of what I did.
Depending on what sort of cross-browser compatibility you are hopeing to achieve, there are a couple of different CSS3-type options that will allow you to rotate elements by 45 degrees.
However, the example you linked to just uses one large background image with the graphics already in-place: there's nothing achieve with CSS there at all apart from setting it as the container background.
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
What's the best approach to achieve the following effect?
[Image Removed by Poster]
I need that text to wrap around the image, which should always be in the bottom right corner. Thanks.
you will not succeed on this with pure html/css but if javascript is an option for you might want to have a look at
http://code.google.com/p/jqslickwrap/
http://www.webappers.com/2008/01/10/css-text-wrapper-makes-hthml-text-wrap-in-shapes/
Unfortunately you won't be able to get text to wrap around an image like in publishing software and your example above. What you can do is set the image to float to the right or align to the right and assign margin left to it which will pad the text off of it.
Live example here: http://jsfiddle.net/2bjn3/
Actually is is possible if you're not opposed to non-semantic markup. Take a look at this working example:
http://jsfiddle.net/chprpipr/Zhz2v/
If you set the background image of the container to contain your portrait image, you can get pretty close to what you're looking for.
Sorry. HTML and CSS has some limitations. This cannot be achieved with CSS or HTML.