Dark Blue styling - language-agnostic

This is not a programming question, so I apologize if it doesn't really fit in this website.
I want to create a 3 column website where the dominating background color is dark blue, and the secondary side column is more noticeable than the tertiary column, and where the primary content area is white.
I'm thinking about this and I can't think of any ways or color choices to make it look good.
Any sources of inspiration or just color suggestions or overall style suggestions would be appreciated!

Before this gets smacked down:
Use http://colorschemedesigner.com/
It will give you an example of what the website will look like in the color scheme and it will also generate the template for you which is nice.

This site is useful for helping with colour selections.

Don't miss out on http://www.templatemonster.com/.

I have found http://www.colourlovers.com/ to be about the best with coming up with color schemes.

Related

Hover over div, changes section background image?

I'm trying to recreate the features section:<section id="features"> # https://dreem.com/en/
Basically, I'd like to change the background images and text and iconography.
I've been playing around with it here: https://codepen.io/JordiUp/pen/XZJdQO
But I haven't figured out how to the get the hove transitions working.
Am I able to achive this effect within just a section using HTML and CSS, or am i missing something and need Javascript.
First time posting, Huge thanks in advance.
Hope it will work for you, Please refer this link
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-image-swap-on-hover

Wordpress Navigation Child/Parent

I've been customizing a Wordpress Theme (iconic-one) for an aquintance of mine. Everything is going according to plan, but I've ran into a problem.
I've modified the style of the navigation bar slightly, but one of the elements is not adjusting accordingly.
The problem is that when hovering over a child element of a dropdown, the parent element in the navigation bar goes back to the original color, which is blue.
Uploading the relevant code is an issue, as I have no idea what is causing the problem.
For reference: oefentherapievanuitdekern.nl is de website, you can see the problem occur on the main page.
Is there anyone who can point me in the right direction for a solution? Any help is greatly apreciated.
Kind regards,
Bik
as I can see, there are two diffrent Stylesheets overwriting each other, i am not that deep into Wordpress, but maybe in ur Theme u can define hover color and aktive color
AND maybe hover color for sub-menu?
otherwise u have to work with code :P

navigation menu tabs pure css

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!

How to make letters appear as they do in this wireframe?

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 :)

How to create a horizontal navigation in HTML/CSS above an image?

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/.