also see deprecated html, css also see MyCSS, a visual layout of my basic stylesheet

W3C : default 'hosted' Style Sheet

'Modernist.css'
also, html4 'default' style sheet
OR, an article on My LandisTwo site which lists 'default' css, eg, firefox, opera, WordPress, etc.

CSS Syntax: the structure of a Style Statment

I'm going to use the <p> Selector ('tag', 'element') to illustrate.. this confuses me All the time, 13+ years on.

<p style="font-size:24px; color:purple; text-align:left; ">

Here are 2 pretty good articles on Character Sets and how UTF-8 (which i'm still confused about. One says that uft-8 is a subset of Unicode and Not an official Unicode set, and then another says it is.. )

W3C International, articles, 'definitions-characters'

A really decent article about Asian characters, referred to in above w3c article

Tip'n'Trick  * 2 links above: 1st is an undefined <p> tag enclosed in a <a class="normal"> tag while the 2nd is the opposite,
the <p> has the class="normal" enclosed in an unmodified (from css style) <a> tag.
CSS styling of 'a' and 'a:hover' that i'm talking about when i say 'unmodified' or 'unstyled', the truth is, they Are styled in my stylesheet:
a { font-family: inherit; color: inherit; font-size: inherit; font-weight:600; font-style: inherit; text-decoration: none; background-color:inherit; }
a:hover { font-family: Helvetica, Arial, Tahoma, sans-serif; text-decoration: underline; background-color:inherit; }
a.normal { font-family:inherit; color:rgb(96,0,0); font-style:inherit; background-color:inherit; font-size:inherit; } - and -
a:hover.normal { font-family:inherit; color:red; font-style:inherit; background-color:inherit; font-size:inherit; font-weight:inherit; text-decoration:none; }
Also, the hr tags used on this page are: "<hr class="hg" ('heavy gray')> css: hr.hg { width:90%; height:3px; border-width:1px; color:rgb(32,32,32); background-color:rgb(200,200,200); } or are <hr width="80%">,, fyi. Landis ☡"

SVG Graphics - simple code - Circle - SVG Box with Gradient Fill


simple svg object created in code.. pcool. :
<svg width="60px" height="60px"> <circle r="25" cx="30" cy="30" fill="green"/> </svg>

Example radgrad01 - fill a rectangle by referencing a radial gradient paint server 
<svg width="8cm" height="4cm" viewBox="0 0 800 400" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example radgrad01 - fill a rectangle by referencing a 
           radial gradient paint server</desc>
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>

HTML5, CSS3: elements that make up the 'parts' of html and css... 'The Syntax'

Depending on what you read, where you read it and when it was written, the 'parts' that make up an HTML or CSS statement are defined, labeled, referred to or described differently.

In 1991,92, I had a Engineering Professor tell me, "the nice thing about 'Standards' is that there are so many to choose from". Isn't that the truth.

So, having been coding html since the mid 1990's, I've seen all or most of them and used a few, probably incorrectly, but... I like mine and here they are:

the basic structure of any HTML statement, using 'p', the paragraph element (selector)

<p> ( 'p', paragraph 'Selector' )

<p> class="NameOfClass">
(the 'class' is a style you 'pre-define' either in the head of a page or in an external Stylesheet')

<p> style="Property:Value;">
('style' is style you 'apply' to an element (selector) 'inline' and applies only to that single 'selector')

Now, here is where I get confused. Some times, in some places the 'p' is a selector, but i 'grew up' calling it an 'element'.

The 'Property' is the 'attribute' you are attempting to effect, belonging to the 'Selector', e.g., 'color:red' or 'font-size:12px' etc

The Only part of this that is Usually the same, no matter where you are reading is the 'Value'. The 'amount' of something affecting the 'Selectors' given 'Property'

So, the way I look at it is that the 'element' must be an 'object' within the page and Not things like 'p' or 'table', but an image (img) or a div...
If a single element is an object, but an object is a snippet of code like a media stream (youtube video for instance) then ...
I guess that the 'whole' thing, selector, property and value could be considered an 'element' of the page, just like a video or image..
OR... Possibly, the 'Element' is a 'piece of HTML code that 'defines' something and the selector is CSS, which describes or defines the 'selected' HTML 'element'?

In HTML it's a little different:

<p>
(the 'p' (paragraph) is an Element or, again depending what standard you're reading, a 'Tag')

<p color="red">
(the p element or 'tag' has 'Attributes' (color) that describe the element and the attributes have a value (eg, red)

  • Here is how W3schools, a pseudo, de facto authority on HTML, CSS says about it:
    CSS Syntax
  • Here is what W3c.org, The Web Publishing Authority.. right.. says about CSS CSS3 module: Syntax. Good Luck deciphering it.
  • and Here is what W3c.org has to say on HTML5 HTML Syntax. Again, Good Luck!
  • another source from W3c.org listing 'all' their 'standards' is found here: All Standards and Drafts - W3C:.. lol,, good luck..

Forcing a vertical Scroll Bar

Forcing a vertical scroll bar on a div. This is very useful when, for example your table is 3,000 rows long and you don't want your div to force your page to bee that long... Here is an example on my Special Characters page... *you'll have to 'unhide' the table of Named HTML - Unicode entities...

*the code
<div style="height:540px; overflow-y:scroll; overflow-x:hidden; width:635px; margin:0px 0px 1px 0px; padding:0px; ">

*note:
i still can Not get inline style to work with hover.
w3c says this works, but I, nor anyone I 'talk to' can get them to work together.
style="{color:green;} :hover { color: red; }"...

exact specifications from w3c's 'Example'... that Doesn't Work!

  1. <a href="http://www.w3.org/"
  2. style="{color: #900}
  3. :link {background: #ff0}
  4. :visited {background: #fff}
  5. :hover {outline: thin red solid}
  6. :active {background: red}">..
    yet Another w3c failure. 'example' of inline style for hover and other pseudo classes.</a>

What still works is OnMouseOver="this.style.color='red' " and OnMouseOut
*note, note: the paragraph below utilizes the OnMouse, MouseOut jscript code for link on 'pseudo class', fyi

*note: after many years,
this is the first I've read this.. pseudo class :hover Must come After link, active and visited in your CSS

code for 'pseudo classes' above:
<a href="http://www.Your-url" style="text-decoration:none; color:rgb(96,0,0); " onmouseover="this.style.color='red' " onmouseout= "this.style.color='#600' " onclick="this.blur()" target="_blank" title="visit w3c.org">

*note: the method of making this and above 'code' appear 'lighter' is done with the attribute 'opacity:0.x'
eg, <p style="font-size:10px opacity:0.5; ">
in the past, i would have styled each 'span color' as rgba (x,x,x,0.5); values.. instead just set the paragraph.. : )

*NOTE: see more on pseudo classes below

 

style, sub-style, action syntax a:hover.normal { }

toiled over this,
but here it is. when styling a sub-element (selector: decloration) the order is parent or main selector

'a' (anchor, link) the 'sub-class'
'.normal' (you create)
then the 'alternate' selector (action) ':hover'
this defines what will happen to selector (class) a.normal (what it will look like) when cursor is ':hoovered' over it.
likewise with the selector:declaration 'TD' with slit difference of a space instead of a ':' (colon) - table.main td

combining selectors - how to make exceptions in these cases

sometimes you have to have 'nested' selectors to accomplish what you want in your document. For instance, You have an <h1> as a section or chapter heading in your document, followed directly by a 'sub-section' heading such as an <h3>. The following 'style' affects the Second selector in order.

see specs at w3c

theoretical 'top of page' or section:

<h1> This is Chapter 2: Coding web pages</h1>

<h3>in this section we will look at nesting selectors</h3>

In these cases the combination on margin, padding and line-height of 2 selectors stacked on top of each other or 'nested' will cause major space between them and make your layout look cheep. To minimize or effect selectors or elements in these situations there are 'nesting' rules that can be defined in your css as apposed to having to 'style' inline these selectors, elements as you go.

h1 + h3 { margin-top: -12px; }

in this case we are saying 'if' h1 precedes h3 then change the top margin of h3 as to lessen the space between them as apposed to stacking 2 selectors or elements designed to be 'standout' elements of your page. Essentially, make them work together and complement each other instead of compete and in turn, look like shit.

To show this as an example, i've made up 2 new 'headings' as i can't show both un-styled and styled if they are defined in my stylesheet These headings, h11 and h13 are styled exactly like h1 and h3 with the following addition to the stylesheet

h1 + h3 { margin-top: -12px; }

theoretical 'top of page' or section:

<h1>This is 'h1' section heading</h1>

<h3>This is sub-section 'h3'</h3>

<p>see how that works?</p>

h1 + h3 { margin-top: -12px; text-align:center; }

theoretical 'top of page' or section:

<h1>This is 'h1' section heading</h1>

<h13>This is sub-section 'h3'</h13>

Also, you can affect conditionally, the alignment in these casses. Say you want h3 to be aligned in center or even right of section whenever it is preceded by a 'chapter title'.
in this case you would add the following.

h1 + h3 { margin-top: -12px; text-align: center; }

my list of uncommon, and or often used selectors and values

☡ show~hide

there are more coming.... Landis ☡

:pseudo class selectors affect the parent selector 'if' conditions are met

A few of these I use a lot are ':hover', ':after' and ':nth-child'

the 'hover' class is used to change something, like the color of text when a mouse cursor is 'hovered' over the element. I use it on most of my 'a' (anchor) or link elements

a:hover { font-family: inherit; text-decoration: underline; background-color:inherit; color:rgb(96,0,0); font-weight:inherit; }

Another ':pseudo' class i use regularly is in my 'signature'

Landis

the way this works is i use <p class"sig"> and 'sigright' which are defined in my stylesheet as:

	.sig { font-family:helvetica, arial, tahoma; font-size:1.1em; color:rgb(0,0,0); text-decoration:none; padding:2px; }
	.sig:after { content:" ☡"; font-size:inherit; }
	.sigright  font-family:helvetica, arial, tahoma; font-size:1.1em; color:rgb(0,0,0); text-decoration:none; padding:2px; text-align:right; margin-left:90%; margin-right:6px; }
	.sigright:after { content:" ☡"; font-size:inherit; }

What hapens is the ':after' inserts the unicode character " ☡" including leading space after what I've typed inside the <p class="sig">, in this case my name <p class="sigright">Landis</p>
I use the 'sigright' to 'sign' on the right side of a 'document' just as you would a legal doc in real life.

Landis

And the ':nth-child' i use to alternate row colors in a table.. see: my table of Named HTML characters on the SpecialCharacters page

see spec at w3c

Style - 3 (4) basic ways to 'include' it in your document..
it's easier than i tried to make it or i just have figured it out?

3 types of <style="inline, in head or attached external stylesheet">

also see document at W3C.org titled 'valid-dtd-list'

Here are a few examples:

  1. Only setting properties on the element itself, no pseudo-elements or pseudo-classes: 
    <p style="color: #090; line-height: 1.2">...</p>
  2. Setting properties on the element, as well as on the first letter of the element, by means of the '::first-letter' pseudo-element. Note that curly braces ({...}) are required in this case: 
    <p style="{color: #090; line-height: 1.2}
	    ::first-letter {color: #900}">...</p>
  3. Setting properties on a source anchor for each of its dynamic states, using pseudo-classes: 
    <a href="http://www.w3.org/"
	    style="{color: #900}
	    :link {background: #ff0}
	    :visited {background: #fff}
	    :hover {outline: thin red solid}
	    :active {background: #00f}">...</a>
  4. Importing a style sheet to apply as a scoped style sheet: 
    <div class="navigation">
	    style="@import url(navigationstyles.css);">...</div>
  5. Including style in the head of a single page: 
    	  <style type="text/css">

	  body {
	  background-color:rgba(240,240,240,1.0);
	  }
	  
	  p {
	  color:rgb(80,80,80); 
	  font-size:12px;
	  indent:4px;
	  }
	  
	  </style>
	
	</head>
	<body>
  6. 'including' a style sheet in the head vs the @import method. this happens to be the way i've always done it. 
    <head>
    <link rel="stylesheet" type="text/css" href="stylecss.css" / >

Note: in CSS1 and CSS2, the spelling of '::first-letter' and '::first-line' is ':first-letter' and ':first-line' respectively, i.e., with a single colon, but Selectors recommends using double colons for pseudo-elements.

Align-Text:Center; ~ { margin-left:+80px } with 'garlic pepper'.. mmm.

aligning text 'center' using style: in my footer, there is an image (html-kit, logo) on the right side, same line as my 'copyright' statement. if i use the styling 'p class='' with 'style="text-align:center; "> the text is centered in the space between the image and the left margin, so i doesn't appear centered especially with a small 'thank you' 'centered' below it to compare it to. so I tried this ".. style="text-align:center; margin-left:+80px; which i was hoping would center and then 'add' 80 pixels to the left.
I think it would be like messing around ' margin-left:XXpx; margin-right:XXpx; ">..
don't know yet if it's CSS compliant, but it works!

including in the head of a single document:
I have several examples bellow, so look there
*note: /* css comment */ = a css comment, not processed by server or browser

somewhere after <head>

<style type="text/css">
/* 'comment' this is the definition of element <td> for the parent element table class 'main'*/
/* 'comment' border:1px solid black;     -this is 'shorthand that does the same as the following*/

table.main td {
border-width:1px;
border-style:solid;
border-color:rgba(80,80,80,0.5);
border-spacing:0px;
color:black;
font-family: Helvetica, Arial, sans-serif;
font-size:100%;
font-style:none;
}
</style>

,but before </head>
and <body>

Landis.

the following is an 'inline' style declaration. in this example, i'm modifying the <p> (paragraph) tag (selector, element)

<p style="color:gray; font-size:12px; text-transform:oblique; >

some simple 'boxes' organized around, over each other with one rotated

here is a basic style for the rotated 'box'. 270deg is equal to -90deg (counter clockwise). I hate the moz,webkit,ms crap, but i can't find a definitive resolution at w3c for css2.1/3 that works : (

  1. div.rotate270 {
  2. transform: rotate(270deg);
  3. transform-origin:500% 50%;
  4. -ms-transform: rotate(270deg); /* IE 9 */
  5. -ms-transform-origin:50% 50%; /* IE 9 */
  6. -webkit-transform: rotate(270deg); /* Safari and Chrome */
  7. -webkit-transform-origin:50% 50%; /* Safari and Chrome */
  8. -moz-transform: rotate(270deg); /* Firefox */
  9. -moz-transform-origin:50% 50%; /* Firefox */
  10. -o-transform: rotate(270deg); /* Opera */
  11. -o-transform-origin:50% 50%; /* Opera */
  12. }

Font-Family:Helvetica, Arial, Tahoma, etc.. - You NEED the comma's between font family names!
Like I've said, there are No standards, even within the 'standards'.. sometimes they feel like comma's sometimes they don't... : (

Headline (<H>) 1 thru 6.. that's it. Sooometimes,,, you can use 7, but I've never been able to use <h8>

{ most complete w3c Font Reference i've found: }

  1. css2.3 Specifications cover
  2. css2.1 specifications: selectory 'index'
  3. css2.1 specifications: properties (attributes) 'index'
  4. css3 fonts
  5. css3 module 'fonts'

Show / Hide ~ Expand / Collapse Table ~ <Div>

I have some huge tables on Special Characters page that list character codes for HTML, CSS, Unicode and Glyphs
so i thought it might be nice to 'collapse' the tables if possible as the page had gotten to be 12 pages long. that's a Lot of scrolling..
this is the simplest code I can find and modify to do what I want

*note.. you can change the 'names' of the id (#) and classes ("u2668", "article" whatever, to a name that suits you or your application). these are the names from my Unicode table i built
*don't forget to change the id (# [ID]) name in the javascript. it's in 2 places, both in parentathese () ... function unhide(NAME-of-Your-Table-ID) and getElementById(NAME-of-Your-Table-ID)

{ ☡ show / hide chart }

download a very clean, clear example (template) of the Hidden-Unhidden code - Complete
with style for tables

Landis ☡

my css snippets, little things that are hard to find or even know are an option for you

set document size on open:
method 01: as a meta tag in <head>
<meta pageSize=200x200, resize=no, scrollbars=no />

- or - put this in your <head> as style.

html { height: 200; width: 200;
overflow-y: hidden; overflow-x: hidden; }

<base href> set in <head> will make it so all your hrefs can be typed as 'relative' doing away with the need for using the url eg, http://landisreed.com/images/spacer.gif or absolute path on server, like /bclinformationservices/landisreed.com/images/spacer.gif (assuming your website is on a host, 'shared server' (website hosting service) or shared IP, as if your domain is a root domain or 'main account' on the server or have set the php [root] < ?php include ($_SERVER['DOCUMENT_ROOT'].'/inc/nav.html') ; ?>

<div id="footer"> basic 'body' box as used on this page

  1. #page01 {
  2. position:relative;
  3. margin-left:auto;
  4. margin-right:auto;
  5. margin-top:0px;
  6. margin-bottom:4px;
  7. width:960px;
  8. height:auto;
  9. padding:0px;
  10. background-color:rgba(0,0,0,0.5);
  11. border:1px solid gray;
  12. border-radius: 4px;
  13. box-shadow:2px 2px 2px #666666;
  14. z-index:20;
  15. }

the color 'declaration' of selectors (tags) like background-color:rgba(0,0,255,0.5) *see note

what this says: rgba RedGreenBlue color values with the 4th value being the Alpha channel or the transparency of the element.
color values are from 0 to 255 (each) with 0,0,0 being Black, 255,0,0 Red, 0,255,0 Green, 0,0,255 Blue and 255,255,255 being pure White.
the Alpha values are from 1.0 to 0.1

*note: notice how the selector (elelment) delcaration (values) get bigger form background-color to 255,0.5)?
I used the <span> tag without closing each (called nesting) change from gold to blue, so the tags where 'inheriting' their values from the text before it.
because I used the font-size:1.1em. 1.1em says that the text should be 1.1 times the size of the text before it (around it)
So,,, each time i use the span tag, without closing, the new span was 1.1 times larger then the 1.1 times larger text befoer it.

*Note: background-color:  when used in a child or sub element (selector) 'removes' content of 'TD':
When element - value (selector : decloration) background-color:  when used in a child or sub element (selector) as in table.main td { background-color:"white" } ("none" and "inherit") will blank out the declaired cell 'TD' bground .
if the TD has a 'bgcolor=' set, the obsolete html value is replaced by parent element (selector) instead of it being the 'current' value (breaks the 'higherarchy').
I used my utf-8 text editor to search/replace <td bgcolor="xxxxxx" with <td style="background-color:xxxxxx and then the cell will again, superseed the parent style

08.06.11:
'postit-note' how I built this css3 'box' with {border, shadow, background color:
the 'in-line style' is used to create this box
*<style="box-shadow:5px 5px 5px rgba(20, 126, 0, 0.8); font-size:14px; background-color:lightyellow; border:2px solid gray; border-radius:10px; margin-left:2px; padding:5px; width:440px ">

musical quarter note: &#9833; = ♩
musical eighth note: &#9834; = ♪
musical single bar note: &#9835; = ♫
musical double bar note: &#9836; = ♬
musical flat note: &#9837; = ♭
musical natural note: &#9838; = ♮
musical sharp note: &#9839; = ♯
You can copy the &#98xx; (ampersand, pound, 4 digit numbar, semi-colon) from here, But, if you copy the code from 'page source' you will have to change the amp (&amp;) 'code' to an actual single character Ampersand .
characters by Ron at answers.yahoo - [code] by Landis.

[code string] &#9833; &#9834; &#9835; &#9836; ...... &#9833;&# 9834;&# 9835;&# 9836; [/code string]
renders this

...... ♬ ♫ ♪ ♩ ...... ♩ ♪ ♫ ♬ ......
or
...... ♩ ♪ ♫ ♬ ....... ♬ ♫ ♪ ♩ ......
  *the actual code being used may have slightly different color values... i tend to play with them

also see my Special Character html, hex, unicod encoding page

the code for the above <hr> as defined in my css stylesheet
hr.hg { height:3px; border-width:1px; color:rgba(32,32,32,0.7); background-color:rgba(200,200,200,0.7); }
to use as inline style drop { } insert in <hr style=" -code- " > *see css hr

this is the <stylesheet> or <head> 'long form' of my 'box' element
Rotation-Selectors are 'rem'd' (remarked, commented out) because the code to 'workaround' the rotation in ie (internet explorer), early firefox and mac safari,,, Sucks!

the code for above, dotted '<hr>' defined with style:
<hr style="height:1px; border-width:1px; color:gray; border-bottom-style:dotted; border-top-style:none;" / >

<style type="text/css"> *see css hr div.postit-yellow {
/* this works great, but... inserting onto a table or 'cell' shifts other things. Need to try puting on top of page and specifing location with margin properties.. another day. 08.06.11 - Landis */
width:280px;
padding:0px;
border:2px solid gray;
border-radius:10px;
/* margin:60px; /* changes position relative to where it's inserted, Nope, puts a border or 'margin' on all 4 sides. need to use margin-right etc */
margin-left:10px;
/* margin-top Minus 100px is an attempt to 'move' the box outside of the td it's in */
margin-top:-100px;
/* margin-top Minus,,, Yep... It works, cool ! Landis */
background-color:yellow;
/* rotation-point:50% 50%; /*as of 08.06.11, not yet supported */
/* rotation:45deg; /*as of 08.06.11, not yet supported */
/* transform:rotate(30deg); /*might not be supported yet either, 08.06.11 */
/* Rotation, for now, this is how (08.06.11) */
transform:rotate(20deg);
-ms-transform:rotate(10deg); /* IE 9 */ /*Does NOT work on any ie bellow 9.. ie and ms suck! */
/* Minus Rotation - this is an atempt to see if a Negitive Rotation works or does it only work 'clock-wise' ie -10 would be 350deg */
/* Yes, again, cool. Minus (-10deg) works... */
-moz-transform:rotate(-10deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
/* Rotation, for now.. Freaking Works... Cool - 08.06.11 Landis (got this from w3schools.com */
}

hr.sharpie {
width:90%;
background-color:black;
border:2px solid gray;
/* border-color:gray; /* will use 'grey' , but seems to like 'gray' with an A - Actually this is Not even Used - *see above border */
border-radius:25px;
height:5px;
}
</style>

<table,th,td> CSS and tables.. this one took me Too long. I should have given up Long before I did.

here is code from my ColorCodes page.
/*definitions i used in some of the color chip tables*/
table.main { /*so, i define a 'class' of main ie, <table class="main">*/
width:100%;
background-color:inherit; /*warning: i got a validation warning using 'white' as bkgcolor, same as parent, so changed to 'inherit' from parent*/
/* border:10px solid red; short hand */
border-width:1px;
border-style:solid;
border-color:rgb(80,80,80); /* long form - warning: apparently there is no (rgb)a (alpha) in border*/
padding:1px;
color:black;
font-family: Helvetica, Arial, sans-serif;
font-size:100%;
font-style:none;
}

table.main td {
/*border:1px solid black; css short hand */
border-width:1px;
border-style:solid;
border-color:rgba(80,80,80,0.5);
border-spacing:0px;
}

<hr/>

is more or less, mostly more, a CSS 'box' and a box is as set of borders incuding inter-space

this is a traditional whose width i've set to 220 pixel with <hr style="width:220px;" >

if you adjust the width and more inportanly, the height, add color to 'background' it's easy to see it's realy a css 'box'

<hr style="width:220px; height:20px; border-color: black; border-width:5px; background-color:purple; box-shadow:4px 4px 4px gray;" >

*note, i added 'shadow' to the border which acounts for the 'beveled' look.

the 'new' HTML5 <hr> is no longer a 'horizontal rule', but an inline 'seperator'..

{ *notes: (1): i've been using border-shadow:4px,4px,4px gray;, but it seems either i was 'remembering' it wrong or , again w3c changed their 'specs'. Anyways, the only thing i can find now is box-shadow: using simular attribute (value) syntax, BUT NO ',' (commas) ' :4px 4px 4px gray; }
(2): also, w3c validator now says that margin-before and after are not valid.. Fucking assholes!
(example: <style="display:block; width:220px; /*margin-before:0.5em; margin-after:0.5em; margin-start:auto; margin-end:auto; border-style:inset; border-width:1px;" >

 

<hr class="appleheart"> the 'hr' above, coded below 

hr.appleheart:before {
  content:"\2767";
  position:absolute;
  width:100%;
  top:-0.25em;
  text-align:center;
  color:rgba(0,0,0,0.21);
  text-shadow:0px 0px .05em rgba(255,255,255,.12);
  height:2em;color:#ccc;
  font-size:2.75em;
}

hr.appleheart {
  position:relative;
  border-style:none;
  border-top:.1em solid #ddd;
  border-collapse:collapse;
  margin:2em 0;
  padding:0em; 
  display:block;
  height: 2em;
  line-height:1em; 
  background-image:-moz-radial-gradient(50% -0% 90deg,ellipse cover, rgba(255,255,255,1), rgba(255,255,255,0.7), rgba(255,255,255,0.0), rgba(255,255,255,0));
  background-image:-webkit-gradient(radial, center -20, 0, center -1200, 1270, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)), color-stop(0.55, rgba(255,255,255,0.0)), color-stop(0.25, rgba(255,255,255,1)));
}