I have this wireframe that I am working from:
http://comehike.com/MOCKUP3.png
and on the top banner there are two sections like "find a hike" and "plan a hike"
How can I make letters like that? They are white, but have a brown layer around them. I am not sure how to do that.
Also, what font is that? Is it supported by most browsers?
There is a css3 property called text-stroke which does exactly the same thing you asked. The easiest cross-browser solution would be an image.
More on text-stroke: http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property
You can't get a stroke to look like that with pure CSS. Unfortunately, that is a a photoshop effect and you won't be able to do that with live text.
Same goes for up in the nav. That looks like a bezel effect, so you'll have to recreate that with an image.
You might also consider <canvas> to show-off your Bezier talent :)
Related
I am trying to replicate a design element and remove the image and hopefully replace it with plain HTML/CSS. Essentially I have a header > h1 that has a title in it. For example we'll say this title is "Stack Overflow", like so..
<header>
<h1>
Stack Overflow
</h1>
</header>
In my current CSS, the text-indent is pushed off the screen and a background is applied to the h1.
To replace that I'm using the -webkit-text-stroke: rule which works fine, albeit not being fully supported across all browsers. The problem with it is one that many Photoshop users come across when applying stroke to text and that is the position of stroke.
Let me demonstrate with a badly put together image: https://i.imgur.com/eQC9B5v.jpg - the top text shows stroke that is "outside" of the text, the bottom one uses what Photoshop calls "center".
It seems that -webkit-text-stroke based it's stroke on that "center" variant in Photoshop. I'd very much like it to replicate the "outside" option.
I can't see anywhere I can set this, and I'm guessing I can't but I'd be interested to know if..
a) there is a method, and if so what is it?
b) if there isn't a method, has anyone found a different way of achieving this?
Now I should say, I found this: https://www.petercarrero.com/examples/stroke which in turn came from a post posted on here in 2013 (CSS- webkit-text-stroke but stroke covers font-color)
On caveat here is that I believe SVG can control the stroke type and I would be interested to see any solutions that use it, but ideally I am not targetting an SVG solution.
Thanks in advance.
For example, if you look at the image here:
Is it possible to create the love' hate part? where the hide text is a little-but underneath the Love text? And also, how can I cross out the hate text?
yes, it is possible, but I don't recommend doing it that way
for the stroke: simply create an element and rotate it a bit
for the "underneath" look: use position: relative (absolute), margins, paddings etc.
here is live example: http://jsfiddle.net/78qpE/1/
If you want the image to look like the one you attached, it would be done in a program like Illustrator, but it is unclear if this is what you want. Can you elaborate at all, or provide code for what you are trying to do? It is possible to have both "Love" and "Hate" in separate DIVs, positioned by CSS. If it is only text, there are CSS controls for strikethrough as well.
I'm looking for a good css technique to use nav tabs that look exactly like this:
I have a div with a logo that has a background and I want the tabs to overlap exactly like in the pic.
I don't want to use drupal's entire html and css structure as I need it to be lightweight. Does anyone know how to do that?
I'll point you to this website: http://pea.rs/ for some good CSS design patterns.
And more spefically this page: http://pea.rs//navigation/horizontal-tabs
There's a pretty good modern browser version of what you're looking for, sans filling in your background and logo.
Of course, border-radius isn't supported in IE8 and below, so you'll either have to be ok with that or use one of the many round-corner techniques.
Hope that helps!
in my header I've got a large image. Above that image I want to place my navigation.
The clue about it: The ul-Navigation-element got a gradient background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.
I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..
Best regards (:
Here is an image of what I tried to descripe. Hope it helps:
http://s7.directupload.net/images/110226/pv4v4c5r.jpg
There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.
This will create the 'transparency' that you want to achieve.
you can use background:transparent for a:hover. This will show the background.
(for internet explorer you could use filter:alpha(opacity=100) );
Here an example: http://jsfiddle.net/3C9sZ/2/
I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.
I've downloaded the following template:
http://www.styleshout.com/templates/preview/Refresh11/index.html
But unfortunately, it has rounded corners and shades. I want it to have square corners and the shades should be removed, too. It should look like this:
But I'm not good enough at (X)HTML and CSS so I didn't manage to achieve this.
Could you please help me? How could I remove the rounded corners?
Please don't say "Take another template" ;) It's also for learning purposes :)
The rounded corners and shadow here are accomplished by images, not code:
http://www.styleshout.com/templates/preview/Refresh11/images/header.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/menu.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/content.jpg
http://www.styleshout.com/templates/preview/Refresh11/images/footer.jpg
If you have control over the file system, you can simply edit these images to have square corners and no shadow.
If its an image and you have access to it, as said above, you would simply put the image in photoshop,illustrator, or flash and alter to your liking. Taking out the shadows or making it look anyway you like. Assuming you are familiar with these programs.