working on it ...

Filters

Explore Public Snippets

Sort by

Found 596 snippets matching: "css style"

    public by lbottaro  352496  5  7  7

    Css zebra color for alternate style in table rows

    This simple code shows how to alternate the style of each row in a table. tr:nth-child(even) or tr:nth-child(odd) operators help in switching style automatically for each row item in a table.
    <html>
    	<head>
    		<title>
             Example of zebra color
    		</title>
    		<style>	
    
    		tr:nth-child(even) {
      background-color: red;
    }
    
    
    tr:nth-child(odd) {
      background-color: white;
    }
    		</style>
            
    	</head>
    	<body>
    
    		<table id="myTable">
    			<th>Lorem ipsum dolor.</th>
    			<th>Nam, sequi, architecto?</th>
    			<th>Aut, eius, esse!</th>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Doloribus, quidem, excepturi.</td>
    				<td>Magnam, dolorum, alias!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Odio, fuga, distinctio.</td>
    				<td>Cumque, necessitatibus, labore!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Esse, suscipit, soluta.</td>
    				<td>Nostrum, animi, fugit?</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Error, veritatis, saepe?</td>
    				<td>Alias, cupiditate, debitis.</td>
    			</tr>
    			<tr >
    				<td>Lorem ipsum dolor.</td>
    				<td>Minus, neque, quisquam.</td>
    				<td>Eius, deleniti, sunt.</td>
    			</tr>
    		</table>
    
    		
    	</body>
    </html>
    

    public by lbottaro  4178  3  6  2

    Round corner div using CSS style

    This simple html example shows how to render a div with rounded corners.
    <!DOCTYPE html>
    <html>
    <HEAD>
    <title>HTML Example</title>
    <style type="text/css">
    .roundCss 
    {
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#FAFAFA;
    width:850px;
    }
    </style>
    </HEAD>
    
    <BODY>
    <h1>My rounded corner div</h1>
    <div class="roundCss">some text here...</div>
    </BODY>
    </html>

    public by lbottaro  4418  10  8  3

    CSS media query for responsive web site

    Using @media you can specify which style to be applied to the page, depending on certain conditions. In this example I check the actual screen resolution, applying different styles when screen width is below a max value. This comes in hand for responsive web site (mobile or desktop applications)
    <style>
    .left{ 	
    	width: 50%; 
    	float: left
    }
    .right{ 
    	width: 50%; 
    	float: left 
    }
    
    @media (max-width: 320px){
        .left{ 
    		width: 100%; 
    		color: red; 
    	}
    	.right{ 
    		width: 100%; 
    		color: yellow; 
    		border: 2px solid green;
    		border-radius: 5px;
    	}
    }
    </style>
    <div class="left">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn red.</p>
    </div>
    <div class="right">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn yellow with a rounded border.</p>
    </div>

    public by lbottaro  3058  3  6  0

    How to define CSS style into HTML body of a page

    This simple HTML shows how to define a css style inline into the page body
    <HEAD>
     <STYLE type="text/css">
       #myid {border-width: 1; border: solid; text-align: center}
     </STYLE>
    </HEAD>
    <BODY>
     <H1 class="myclass"> This H1 is not affected </H1>
     <H1 id="myid"> This H1 is affected by style </H1>
     <H1> This H1 is not affected </H1>
    <div id="myid"> This div is affected by style </div>
    </BODY>
    

    public by msdn  94131  0  5  0

    WriteFormattingProperties: Reads attributes of the current xaml element and converts them into appropriate html attributes or css styles.

    Reads attributes of the current xaml element and converts them into appropriate html attributes or css styles. XmlTextReader which is expected to be at XmlNodeType.Element (opening element tag) position. The reader will remain at the same level after function complete. XmlTextWriter for output html, which is expected to be in after
    /// <summary>
    /// Reads attributes of the current xaml element and converts
    /// them into appropriate html attributes or css styles.
    /// </summary>
    /// <param name="xamlReader">
    /// XmlTextReader which is expected to be at XmlNodeType.Element
    /// (opening element tag) position.
    /// The reader will remain at the same level after function complete.
    /// </param>
    /// <param name="htmlWriter">
    /// XmlTextWriter for output html, which is expected to be in
    /// after WriteStartElement state.
    /// </param>
    /// <param name="inlineStyle">
    /// String builder for collecting css properties for inline STYLE attribute.
    /// </param>
    private static void WriteFormattingProperties(XmlTextReader xamlReader, XmlTextWriter htmlWriter, StringBuilder inlineStyle)
    {
        Debug.Assert(xamlReader.NodeType == XmlNodeType.Element);
    
        // Clear string builder for the inline style
        inlineStyle.Remove(0, inlineStyle.Length);
    
        if (!xamlReader.HasAttributes)
        {
            return;
        }
    
        bool borderSet = false;
    
        while (xamlReader.MoveToNextAttribute())
        {
            string css = null;
    
            switch (xamlReader.Name)
            {
                // Character fomatting properties
                // ------------------------------
                case "Background":
                    css = "background-color:" + ParseXamlColor(xamlReader.Value) + ";";
                    break;
                case "FontFamily":
                    css = "font-family:" + xamlReader.Value + ";";
                    break;
                case "FontStyle":
                    css = "font-style:" + xamlReader.Value.ToLower() + ";";
                    break;
                case "FontWeight":
                    css = "font-weight:" + xamlReader.Value.ToLower() + ";";
                    break;
                case "FontStretch":
                    break;
                case "FontSize":
                    css = "font-size:" + xamlReader.Value + ";";
                    break;
                case "Foreground":
                    css = "color:" + ParseXamlColor(xamlReader.Value) + ";";
                    break;
                case "TextDecorations":
                    css = "text-decoration:underline;";
                    break;
                case "TextEffects":
                    break;
                case "Emphasis":
                    break;
                case "StandardLigatures":
                    break;
                case "Variants":
                    break;
                case "Capitals":
                    break;
                case "Fraction":
                    break;
    
                // Paragraph formatting properties
                // -------------------------------
                case "Padding":
                    css = "padding:" + ParseXamlThickness(xamlReader.Value) + ";";
                    break;
                case "Margin":
                    css = "margin:" + ParseXamlThickness(xamlReader.Value) + ";";
                    break;
                case "BorderThickness":
                    css = "border-width:" + ParseXamlThickness(xamlReader.Value) + ";";
                    borderSet = true;
                    break;
                case "BorderBrush":
                    css = "border-color:" + ParseXamlColor(xamlReader.Value) + ";";
                    borderSet = true;
                    break;
                case "LineHeight":
                    break;
                case "TextIndent":
                    css = "text-indent:" + xamlReader.Value + ";";
                    break;
                case "TextAlignment":
                    css = "text-align:" + xamlReader.Value + ";";
                    break;
                case "IsKeptTogether":
                    break;
                case "IsKeptWithNext":
                    break;
                case "ColumnBreakBefore":
                    break;
                case "PageBreakBefore":
                    break;
                case "FlowDirection":
                    break;
    
                // Table attributes
                // ----------------
                case "Width":
                    css = "width:" + xamlReader.Value + ";";
                    break;
                case "ColumnSpan":
                    htmlWriter.WriteAttributeString("COLSPAN", xamlReader.Value);
                    break;
                case "RowSpan":
                    htmlWriter.WriteAttributeString("ROWSPAN", xamlReader.Value);
                    break;
            }
    
            if (css != null)
            {
                inlineStyle.Append(css);
            }
        }
    
        if (borderSet)
        {
            inlineStyle.Append("border-style:solid;mso-element:para-border-div;");
        }
    
        // Return the xamlReader back to element level
        xamlReader.MoveToElement();
        Debug.Assert(xamlReader.NodeType == XmlNodeType.Element);
    }

    public by msdn  1899  0  6  0

    GetElementProperties: Analyzes the tag of the htmlElement and infers its associated formatted properties. After that parses style attribute and adds all inline css styles. The resulting style attributes are collected in output para...

    Analyzes the tag of the htmlElement and infers its associated formatted properties. After that parses style attribute and adds all inline css styles. The resulting style attributes are collected in output parameter localProperties. set of properties inherited from ancestor elements. Currently not used in the code. Reserved for the futu
    public const string Xaml_FontSize_XXSmall = "8pt";
    public const string Xaml_FontSize_XXLarge = "22pt";
    public const string Xaml_FontSize_XLarge = "20pt";
    public const string Xaml_FontSize_Large = "18pt";
    public const string Xaml_FontSize_Medium = "16pt";
    public const string Xaml_FontSize_Small = "12pt";
    public const string Xaml_FontSize_XSmall = "10pt";
    
    /// <summary>
    /// Analyzes the tag of the htmlElement and infers its associated formatted properties.
    /// After that parses style attribute and adds all inline css styles.
    /// The resulting style attributes are collected in output parameter localProperties.
    /// </summary>
    /// <param name="htmlElement">
    /// </param>
    /// <param name="inheritedProperties">
    /// set of properties inherited from ancestor elements. Currently not used in the code. Reserved for the future development.
    /// </param>
    /// <param name="localProperties">
    /// returns all formatting properties defined by this element - implied by its tag, its attributes, or its css inline style
    /// </param>
    /// <param name="stylesheet"></param>
    /// <param name="sourceContext"></param>
    /// <returns>
    /// returns a combination of previous context with local set of properties.
    /// This value is not used in the current code - inntended for the future development.
    /// </returns>
    private static Hashtable GetElementProperties(XmlElement htmlElement, Hashtable inheritedProperties, out Hashtable localProperties, CssStylesheet stylesheet, List<XmlElement> sourceContext)
    {
        // Start with context formatting properties
        Hashtable currentProperties = new Hashtable();
        IDictionaryEnumerator propertyEnumerator = inheritedProperties.GetEnumerator();
        while (propertyEnumerator.MoveNext())
        {
            currentProperties[propertyEnumerator.Key] = propertyEnumerator.Value;
        }
    
        // Identify element name
        string elementName = htmlElement.LocalName.ToLower();
        string elementNamespace = htmlElement.NamespaceURI;
    
        // update current formatting properties depending on element tag
    
        localProperties = new Hashtable();
        switch (elementName)
        {
            // Character formatting
            case "i":
            case "italic":
            case "em":
                localProperties["font-style"] = "italic";
                break;
            case "b":
            case "bold":
            case "strong":
            case "dfn":
                localProperties["font-weight"] = "bold";
                break;
            case "u":
            case "underline":
                localProperties["text-decoration-underline"] = "true";
                break;
            case "font":
                /*
                // DISABLE FONT ATTRIBUTES
                string attributeValue = GetAttribute(htmlElement, "face");
                if (attributeValue != null)
                {
                    localProperties["font-family"] = attributeValue;
                }
                attributeValue = GetAttribute(htmlElement, "size");
                if (attributeValue != null)
                {
                    double fontSize = double.Parse(attributeValue) * (12.0 / 3.0);
                    if (fontSize < 1.0)
                    {
                        fontSize = 1.0;
                    }
                    else if (fontSize > 1000.0)
                    {
                        fontSize = 1000.0;
                    }
                    localProperties["font-size"] = fontSize.ToString();
                }
                 */
                string attributeValue = GetAttribute(htmlElement, "color");
                if (attributeValue != null)
                {
                    localProperties["color"] = attributeValue;
                }
                break;
            case "samp":
                localProperties["font-family"] = "Courier New"; // code sample
                localProperties["font-size"] = Xaml_FontSize_XXSmall;
                localProperties["text-align"] = "Left";
                break;
            case "sub":
                break;
            case "sup":
                break;
    
            // Hyperlinks
            case "a": // href, hreflang, urn, methods, rel, rev, title
                //  Set default hyperlink properties
                break;
            case "acronym":
                break;
    
            // Paragraph formatting:
            case "p":
                //  Set default paragraph properties
                break;
            case "div":
                //  Set default div properties
                break;
            case "pre":
                localProperties["font-family"] = "Courier New"; // renders text in a fixed-width font
                localProperties["font-size"] = Xaml_FontSize_XXSmall;
                localProperties["text-align"] = "Left";
                break;
            case "blockquote":
                localProperties["margin-left"] = "16";
                break;
    
            case "h1":
                localProperties["font-size"] = Xaml_FontSize_XXLarge;
                break;
            case "h2":
                localProperties["font-size"] = Xaml_FontSize_XLarge;
                break;
            case "h3":
                localProperties["font-size"] = Xaml_FontSize_Large;
                break;
            case "h4":
                localProperties["font-size"] = Xaml_FontSize_Medium;
                break;
            case "h5":
                localProperties["font-size"] = Xaml_FontSize_Small;
                break;
            case "h6":
                localProperties["font-size"] = Xaml_FontSize_XSmall;
                break;
            // List properties
            case "ul":
                localProperties["list-style-type"] = "disc";
                break;
            case "ol":
                localProperties["list-style-type"] = "decimal";
                break;
    
            case "img":
                localProperties["src"] = GetAttribute(htmlElement, "src");
                localProperties["width"] = GetAttribute(htmlElement, "width");
                localProperties["height"] = GetAttribute(htmlElement, "height");
                break;
    
            case "table":
            case "body":
            case "html":
                break;
        }
    
        // Override html defaults by css attributes - from stylesheets and inline settings
        HtmlCssParser.GetElementPropertiesFromCssAttributes(htmlElement, elementName, stylesheet, localProperties, sourceContext);
    
        // Combine local properties with context to create new current properties
        propertyEnumerator = localProperties.GetEnumerator();
        while (propertyEnumerator.MoveNext())
        {
            currentProperties[propertyEnumerator.Key] = propertyEnumerator.Value;
        }
    
        return currentProperties;
    }

    public by msdn  1266  0  5  0

    GetCssAttribute: Extracts a value of css attribute from css style definition.

    Extracts a value of css attribute from css style definition. Source csll style definition A name of css attribute to extract A string rrepresentation of an attribute value if found; null if there is no such attribute in a given string.
    /// <summary>
    /// Extracts a value of css attribute from css style definition.
    /// </summary>
    /// <param name="cssStyle">
    /// Source csll style definition
    /// </param>
    /// <param name="attributeName">
    /// A name of css attribute to extract
    /// </param>
    /// <returns>
    /// A string rrepresentation of an attribute value if found;
    /// null if there is no such attribute in a given string.
    /// </returns>
    private static string GetCssAttribute(string cssStyle, string attributeName)
    {
        //  This is poor man's attribute parsing. Replace it by real css parsing
        if (cssStyle != null)
        {
            string[] styleValues;
    
            attributeName = attributeName.ToLower();
    
            // Check for width specification in style string
            styleValues = cssStyle.Split(';');
    
            for (int styleValueIndex = 0; styleValueIndex < styleValues.Length; styleValueIndex++)
            {
                string[] styleNameValue;
    
                styleNameValue = styleValues[styleValueIndex].Split(':');
                if (styleNameValue.Length == 2)
                {
                    if (styleNameValue[0].Trim().ToLower() == attributeName)
                    {
                        return styleNameValue[1].Trim();
                    }
                }
            }
        }
    
        return null;
    }

    external by Github  390041  1  5  0

    IE11 bug with dynamic CSS styles

    IE11 bug with dynamic CSS styles: gistfile1.md
    # tl;dr
    
    Adding new CSS rules as a string to 'cssText' property of a stylesheet object breaks (some) existing styles in IE11. 
    
    The broken styles include viewport adaptation via @-ms-viewport, leading to broken ("zoomed-out desktop version") responsive sites in Windows 8 style IE11 with window width less than 1024px.
    
    Some widely used plugins (incorrectly) use this approach and can thus break your responsive site. Currently, I'm aware of only Facebook's JavaScript SDK doing this - in other words, if you use FB's plugins and include their JS SDK, your responsive site won't work in Windows 8 style IE11 as expected.
    
    
    # MSFT bug report
    
    https://connect.microsoft.com/IE/feedback/details/810593/ie-11-adding-new-css-rules-via-appending-them-to-an-existing-stylesheet-as-a-string-breaks-styling (reported at 2013-12-04)
    
    The same content below. Sample HTML file available in https://dl.dropboxusercontent.com/u/345752/temp/ie-css-bug.html (open in IE11).
    
    ## Title: 
    
    Adding new CSS rules via appending them to an existing stylesheet as a string breaks styling
    
    ## Description:
    
    It seems that adding new CSS rules as a string to 'cssText' property of a stylesheet object breaks (some) existing styles.
    
    An example:
    
        document.styleSheets[0].cssText += "div { color: yellow; }";
    
    This works (applies the new styles successfully), but it seems that this will also disable/remove some existing CSS rules on the page.
    
    If adding the same new rules via other methods (add a new style tag, use addRule()/insertRule() of an existing CSSStyleSheet object) everything works fine, the problem seems to only apply to the string concatenation approach shown above.
    
    The issue applies to: IE11 (tested on Windows 8 style IE11 on Windows 8.1, desktop IE11 on Windows 8.1, desktop IE11 on Windows 7)
    
    ## Impact:
    
    Currently I'm aware of this breaking viewport adaptation (@-ms-viewport) and keyframe animations. The first one is a fairly severe issue on responsive websites, since it can make the site unusable in window widths lower that 1024px (especially in the snapped 320px view). Focusing here on that one (sample provided [1]), the other one is reported in FB's bug tracker [2].
    
    Since some social plugins (at least current Facebook JavaScript SDK), and assumably some JS libraries/frameworks as well, use this approach for IE, lots of sites are likely to be broken (speculating here though, only aware of the FB SDK, haven't done extensive research on this).
    
    ## Additional notes
    
    Regarding the viewport adaptation issue (which applies only to Windows 8 style IE11): after adding CSS dynamically "in the wrong way", navigation back/forward acts oddly, see attached sample [1].
    
    It seems to make things worse that the document.createStyleSheet() [3] was removed in IE11, at least FB JS SDK is currently falling back to string concatenation approach because this API is not present anymore. Code snippet (from the minified src code of that SDK):
    
        ...
        if(!j.ie()){
            var ea=document.createElement('style');
            ea.type='text/css';
            ea.textContent=z;
            document.getElementsByTagName('head')[0].appendChild(ea);
        }
        else
            try {
                document.createStyleSheet().cssText=z;
            } catch(fa) {
                if(document.styleSheets[0])
                    document.styleSheets[0].cssText+=z;
            }
        ...
    
    
    ## References
    
    About the @-ms-viewport issue/workaround in snapped mode on IE10/IE11 in general:
    
    - http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
    - http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
    - http://nostrongbeliefs.com/why-i-think-we-shouldnt-use-css-viewport-in-ie10-for-now/
    - https://github.com/h5bp/html5-boilerplate/pull/1243
    
    Related specs:
    
    - http://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx (@-ms-viewport)
    - http://msdn.microsoft.com/en-us/library/ie/ms533698(v=vs.85).aspx (cssText property)
    - http://msdn.microsoft.com/en-us/library/ie/ms535871(v=vs.85).aspx (styleSheet object)
    
    Named references:
    
    - [1] sample file provided (ie-css-bug.html)
    - [2] https://developers.facebook.com/bugs/454630827989944
    - [3] http://msdn.microsoft.com/en-us/library/ie/ms531194(v=vs.85).aspx (document.createStyleSheet())
    
    

    external by Jewel Ahmed  492  0  3  0

    WordPress Contact form 7 [Plugins] Nice css3 styles

    WordPress Contact form 7 [Plugins] Nice css3 styles: wp-contact-form-7-style
    CSS
    /*Contact Form 7 CSS Support*/
    span.wpcf7-not-valid-tip{display: none !important; }
    div.wpcf7 .wpcf7-not-valid{ border: 1px solid #F00; margin: 0; }
    div.wpcf7-validation-errors{ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; color: #c4690e; background: #fffdf3; text-align: center; border: 1px solid #e6bf4a; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px;}
    div.wpcf7 .wpcf7-not-valid { box-shadow: 0 0 6px rgba(255,0,0,0.4); } 
    .your-message textarea{ width:100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
    div.wpcf7-mail-sent-ok {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; color: #5f9025; background: #ebf6e0; border: 1px solid #b3dc82; padding: 10px; text-align: center;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; }
    div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; background: #ffe9e9; color: #d04544; border: 1px solid #e7a9a9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; text-align: center;}
    .wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus{ border:1px solid #CCC; box-shadow:none; border-color: rgba(82, 168, 236, 0.8); outline: 0;
        outline: thin dotted \9;
        /* IE6-9 */
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    .wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus,.wpcf7-not-valid, div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked { transition : border 1000ms ease-out;  -webkit-transition : border 1000ms ease-out;  -moz-transition : border 1000ms ease-out; -o-transition : border 1000ms ease-out; }
    
    

    external by Github  366  0  3  0

    @font-face Style Linking

    @font-face Style Linking: gistfile1.css
    /*
      Example of Style Linking fonts using a single font-family name.
      DataURI `src` is url('data:font/woff2;base64,...') format('woff2'), url('data:font/woff;base64,...') format('woff');
    */
    @font-face {
      font-family:'myfont';
      src:        url('myfont.woff2'), url(myfont.woff);
      font-style: normal;
      font-weight:400;
    }
    
    @font-face {
      font-family:'myfont';
      src:        url('myfont-boldItalic.woff2'), url(myfont-boldItalic.woff);
      font-style: italic;
      font-weight:700;
    }
    
    /*
      When setting the font-family property on a selector, font-style and font-weight need to be defined.
    */
    .pullquote{
      font-family:'myfont', sans-serif;
      font-style:italic;
      font-weight:700;
    }
    
    
    • Public Snippets
    • Channels Snippets