How to Achieve This Visual Using CSS

How to achieve this visual using CSS

gradient is a fine idea, you could even add content, no matter the size for the gradient, as long as you size it to be a square:

div {  background-color: red;  border-radius: 0 0 50% 50%;  background-image:        linear-gradient(-45deg, transparent 75%, blue 75%),        linear-gradient(45deg, transparent 75%, yellow 75%),        linear-gradient(to top, green 50%, transparent 50%);  height: 300px;  width: 300px;  transition:0.5s;}div:hover {  height: 150px;  width: 150px;}/* fun */
div {  display: flex;  align-items: center;  justify-content: center;  text-align: center;  font-size: 2.5em;  color: white;  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;  box-shadow: 0 0 5px gray, inset 0 0 0 3px white,inset 0 0 5px black;}

<div>Hover me</div>

How to get Visual Studio's designer to render CSS correctly in an ASP.NET Web User Control?

Sadly at the moment, I think that's the best you're going to get as seen here.

The only good news I can see is this Connect Issue which is "Closed - Postponed", so they may well be thinking about it.

The issue you've got is that you can make a control display very differently depending on the CSS rules applied with the styles - so one style sheet or a combination of parent tags could make (for example) labels appear above their form elements, and another beside them - which would you want to display when you are viewing the User control out of the page context?

Image display in css, html

If I corectly understand what you wanna do try this way:

<div class="image">
 <a href="/css/masterCSS.css">
 <img src="insert path to your image">
 </a>
</div>

This is a method that doesent require CSS to ad content... in case you stil wanna do it that way just use your CSS and in my HTML code delte 3rd line...

I hope that helps :)

Looking for an Acid test visual HTML page

Since nobody is answering this, I'm working on creating my own:

http://html2canvas.clientsite.me/tests/kitchen_sink.html

---

About the page: If you click anywhere on the page it will re-render everything into a canvas element, so that I can save it off as a .png

For anyone interested:

• other tests: http://canvasrenderer.clientsite.me/
• github: https://github.com/cwolves/CanvasRenderer

Reasons for not using CSS to visually rearrange order of HTML elements

[Would] writing the HTML in an ill-structured way would negatively impact our SEO?

Almost definitely. While the precise nature of search ranking algorithms is a jealously guarded industry secret, and each company is different, everyone looks unfavorably on differences between content presented to search engines versus that presented to users.

Here's what Google's Webmaster Guidelines say:

• Create a useful, information-rich site, and write pages that clearly and accurately describe your content. [Pages whose content obfuscates the actual visual ordering are not clearly and accurately describing their content.]

• Make a site with a clear hierarchy and text links. [Putting a <h2> before a <h1> violates a hierarchy.]

• Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. [Someone using a text browser would certainly be confused by bizarre content reordering schemes.]

So, in short, you're meddling with the "clear hierarchy" that search engines are trying to index. That's clearly not desirable.

To answer your more general question:

I'm looking for evidence to back up the argument that we shouldn't do it at all.

Fundamentally, HTML documents are just that: documents, meant for conveying semantic information through their structure.

Attempting to subvert this natural ordering isn't strictly verboten, but it often suggests that you didn't write the markup correctly, and it always leads to unexpected flows. For example,

• In a book, do you expect chapter 7 to come before chapter 6?
• In a newspaper article, do you expect the body to come before the headline?
• In a movie, do you expect the closing credits to come before the title card?

You can see why, structurally, it would be ill-advised to reorder elements in this way. A document has a natural shape; distorting it makes it harder to understand.

There may be compelling aesthetic or artistic reasons to change the form of semantic vehicles like documents (e.g., a movie like Memento which exploits this for deliberate effect), but these are usually well thought-out, and not done trivially.

And you'd be hard-pressed to make an equivalence between a movie, which is designed to entertain, and an HTML document, which is designed to inform.

Link HTML file with CSS file in Visual Studio

I am also new but I think I can help. You have two options, that I am aware of.

The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).

(index.html)

<!DOCTYPE html>

<html>
    <head>
        <title>yourwebsite.com</title>
        <link rel="stylesheet" type="text/css"
        href="style.css">
    </head>

    <body>
        <img src="your.jpg" alt="Handsome Man" width="100" 
height="100">
    
        <h1><b>your name</b></h1>
    
        <p>your tag line</p>
    
        <a href="https://twitter.com/yourtwitter"</a>
    </body>

</html>

(styles.css)

body{
    background-color: #f4f4f4;
    color: #555555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;

    /* Same as above */
    /* font: normal 12px Arial, Helvetica, sans-serif; */

    line-height: 1.6em;
}

h1{
    color: #00ff00;
}

p{
    color: rgb(0,0,255);
}

The second and worst option is to include your css within your main html file.

(Copied from https://ryanstutorials.net/css-tutorial/css- 
including.php)

<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>

Visual Composer, page specific custom css

It's because there is a .(dot) in your extra custom head class.

Try to remove . from your extra custom head class.

---

Related Topics