Add colour block behind text

SquareSpace Styling

@jackie

Remove Underline from Links in Header Button to Underline on Hover Custom Bullets Custom Bullets Announcement Bar padding Tooltip Tooltip - Styling Scrolling Announcement Bar Copyright date automatic Image Block - Button Size Add colour block behind text Custom Highlight Behind Text Use Two Different Fonts On One Line Vertical Text Creates a 'Sticky' Scroll effect with sections Low Highlight on Text Colour Animated Announcement Bar Split Screen Sections (not mobile)

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#servicenow #content #type #plain #text

Accepting Scripted REST Connections for Weird Content-Types

/* This will come in the body at XML but the header will be text/plain, which is why  
all this is happening manually to get this read from the stream.  
*/  
var reqHeaders = request.headers;
gs.info("CPSNS: reqHeaders content-type" + reqHeaders['content-type']);
if (reqHeaders['content-type'] == "text/plain; charset=UTF-8") {
    var stream = request.body.dataStream;
    var reader = new GlideTextReader(stream);
    var input = "";
    var ln = "";
    while ((ln = reader.readLine()) != null) {
        input += ln;
    }
    gs.info("CPSNS: SUB" + input);
} else {
    var body = {};
    var data = request.body.data;

    gs.info("CPSNS: req.body data" + data);

}

#css #background #borders

04_Background&Borders_Class

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background & Borders</title>
</head>
<style>
  .hasnai {
    text-align: center;
  }

  #box-1 {
    background-color: red;
    /* border-width: 5px;
    border-style: dotted;
    border-color: black; */
    border: double 5px black;
    border-radius: 15px;
  }

  #box-2 {
    background-color: chartreuse;
    border: 5px solid blue;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  #box-3{
    /* If you all properties togather than don't use background-image just use background */
    /* background-image: url("img/hrhasnai.jpg")*/
    background: url("img/hrhasnai.jpg") no-repeat center center/cover;
    /* background-repeat: no-repeat;*/
    /* background-position:100px 0px; */
    /* background-position:center center; */
    /* background-position:center top; */
    /*background-size: cover; */

    height: 300px;
    width: 600px;
    color: white;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  #box-4{
    background: url("img/flutter.png") no-repeat center center;
    background-attachment:fixed;
  }
</style>

<body>
  <H1 class="hasnai">
    Hasnain
  </H1>
  <div id="box-1">
    <h1>Box One</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <br>
  <div id="box-2">
    <h1>Box Two</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-3">
    <h1>Box Three</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-4">
    <h1>Box Four</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>
  <div id="box-5">
    <h1>Box Five</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe aspernatur commodi reprehenderit nulla inventore
      architecto nam vel aut magnam ipsam.</p>
  </div>

</body>

</html>

#colour #background #text

Add colour block behind text

#block-53c818fd6d3f39517aed {
background: #f0f0f0;
padding: 50px;
text-align: center;
}

#announcement #bar #animation #colour

Colour Animated Announcement Bar

// Color Animated Announcement Bar //

[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: linear-gradient(99deg,#0d7d88,#708090,#add8e6);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}

// Animation Keyframes - Do Not Edit or Delete //

@-webkit-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-webkit-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

#ios #swift #color #colour #hex

Convert Hex String to UIColor

    func hexStringToUIColor (hex:String) -> UIColor {
        var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

        if (cString.hasPrefix("#")) {
            cString.remove(at: cString.startIndex)
        }

        if ((cString.count) != 6) {
            return UIColor.gray
        }

        var rgbValue:UInt64 = 0
        Scanner(string: cString).scanHexInt64(&rgbValue)

        return UIColor(
            red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
    }

#py #dataframe #pandas #text #exception

Exception and search text between 2 strings

import re

text = 'this is a text'

try:
    found = re.search('is(.+?)text', text).group(1)
except AttributeError:
    # AAA, ZZZ not found in the original string
    found = '0 wtitle' # apply your error handling
found

=> a

#mixin #scss #text

How to Use Mixins in Sass and Pass Arguments – With Code Examples

@mixin text($font-size,$color,$bg-color) {

     // we pass the $font-size to font-size property
    font-size: $font-size;
    
    // we pass the $color to color property
    color: $color;
    
    // we pass the $bg-color to background property
    background: $bg-color;
}



.text1 {
          // ($font-size,$color,$bg-color)
    @include text(3rem,green , black)
}

.text2 {
          // ($font-size,$color,$bg-color)
    @include text(5em,red , transparent)
}

#text #chat

inspiration

undefined

#js #javascript #text #api

Get the parts of speech for a sentence

/**
* Gets parts of speech for a sentence
* @param {String} text The text to get parts of speech for.
* @returns {Promise.<Object>} Resolves into a list of parts of speech. (Or rejects with an error)
* @example 
* var parts_of_speech  = await parts_of_speech("Sometimes I just want to code in JavaScript all day.");
* // ⇒
* // {entities: Array(1), sentiments: Array(1), documentInfo: {…}, wordFreq: Array(4), taggedText: '<span class="tag ADV">Sometimes</span> <span class…>all</span> <span class="tag DURATION">day</span>'}
function parts_of_speech(text) {
*/
function parts_of_speech(text) {
  return new Promise(async (resolve, reject) => {
    fetch("https://showcase-serverless.herokuapp.com/pos-tagger", {
      headers: {
        accept: "application/json",
        "content-type": "application/json",
      },
      body: JSON.stringify({ sentence: text }),
      method: "POST",
    })
      .then((res) => res.json())
      .then(resolve)
      .catch(reject);
  });
}

#text #highlighter

Custom Highlight Behind Text

/* Text highlight underline. Only works for bolded h1 text */
h1 strong{
  background: linear-gradient(to bottom, #FFF 60%, #FFD84A 40%) !important;
  font-weight: normal !important;
 }

#text #fonts

Use Two Different Fonts On One Line

/* Text change detail */
h1 strong {
  font-family: aktiv-grotesk-extended !important;
  font-size: 3.1rem;
}

#text #fonts

Vertical Text

// Easy Vertical Text //

@media only screen and (min-width: 640px) { em {
  width: auto !important;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  font-style: normal !important;
  transform: rotate(180deg);
}
}

em {
  font-style: normal !important;
}

#highlight #low #text #header

Low Highlight on Text

h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
  display: inline; font-weight: normal;
}

#text

Cross-Origin Resource Sharing (CORS)

Accept: text/html
Cookie: Version=1

Add colour block behind text

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Add colour block behind text

Save snippets that work from anywhere online with our extensions

Comments

More like this

SquareSpace Styling

Browse more snippets >>

Embed code snippet