recentpopularlog in

piperh : text   88

« earlier  
Wrapping long words with CSS or HTML – Chris Cid ∣ CJCid
subtitle: How to manage long words when they do not fit to the screen or within a narrow container.
Author describes options for word breaks and overflow, in latin and non-latin alphabets
webdesign  web  design  word  break  wrap  overflow  html  css  text  typography  scroll  reference 
8 weeks ago by piperh
GitHub - Raathigesh/fabulous: 🎨 CSS properties sidebar for VS Code
If I used VSC more, this could be v useful addon - generates css properties sidebar (or maybe it's a palette) for the working window
webdesign  web  design  code  coding  text  editor  vsc  visual  studio  app  application 
10 weeks ago by piperh
txti - Fast web pages for everybody
web service for making text only web pages with a custom url, eg, txti.es/piper. You need a unique code they give you in order to edit. The markup is like a markdown-type editor. Uses Twitter cards
website  text  custom  personal  share  cms  web  edit  content 
march 2019 by piperh
An Introduction to CSS Shapes | Codrops
check MS support for css shapes before using (end 2018: not in Edge or IE)
webdesign  web  design  css  shapes  text  flow  layout  runaround  shape 
december 2018 by piperh
SmugMug's Privacy Policy
smugmug's privacy policy page. Possible sample text for copying, though would need translation from English.
webdesign  web  design  cookie  text  privacy  policy  smugmug 
december 2018 by piperh
Editorial Layouts, Floats, and CSS Grid | Rob Weychert
shows how css grid doesn't accommodate text wrap around images - you end up using a float like always, which seems to undermine the usefullness of grid. (I can't believe this use case wasn't an important consideration in the implementation of grid).
See addendum linked to Rachel Andrew and css exclusions (currently only in Edge)
webdesign  web  design  css  grid  code  coding  width  columns  float  wrap  around  text  editorial  layout  gutter  margin 
november 2018 by piperh
Simple recommendations for writing text descriptions that make a big difference | Invotra
about writing alt text for best accessibility and best experience for disabled users
webdesign  web  design  accessibility  accessible  alt  text  image 
november 2018 by piperh
SVG Filters
Playground for fiddling with and getting code for SVG filters.
graphic  design  image  text  effect  svg  tester  code  filter  playground 
november 2018 by piperh
Trix: A rich text editor for everyday writing
a rich text content editor. Embeddable in web pages, web apps?
webdesign  web  design  webdev  development  rich  text  editor  html 
october 2018 by piperh
Designing A Textbox, Unabridged — Smashing Magazine
article about needing to use html textarea instead of input for fields that might receive a lot of text, and the issue of character limit and how to deal with it. Suggests js methods but without detailing any code.
webdesign  web  design  text  input  textarea  form  field  typing  characters  placeholder  css 
september 2018 by piperh
Fitting Text to a Container | CSS-Tricks
different ways to fit text to its container
webdesign  web  design  text  container  fit  layout  css  box 
july 2018 by piperh
Hyphenopoly.js | Hyphenopoly
Hyphenopoly.js is a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages.
Maybe handy for non-supported language or old browser?
webdesign  web  design  text  hyphen  hyphenate  polyfill  js  javascript  script  hyphenation 
june 2018 by piperh
Where Lines Break is Complicated. Here's all the Related CSS and HTML. | CSS-Tricks
css/html long word break solutions, eg overflow-wrap: break-word and
word-break: break-all
I still see <wbr> as the best although it requires you to insert manually - not poss if using a cms
webdesign  web  design  line-break  typography  css  word  break  long  url  text 
may 2018 by piperh
CKEditor 5 v10.0.0 – the future of rich text editing looks stable
drop-in wysiwyg text editor (similar to that used in Perch) for sites and apps.
wysiwyg  text  editor  ckeditor  cms 
may 2018 by piperh
CSS Techniques and Effects for Knockout Text | CSS-Tricks
words are clipped out of an element and reveal the background
webdesign  web  design  css  text  type  effect  knockout  overlay  blend  pierce  multiply  transition  mask 
march 2018 by piperh
Simple CSS text animation
simple effect of text sliding down, all css
webdesign  web  design  text  effect  animation  css 
january 2018 by piperh
Text input highlight, TripAdvisor style – freeCodeCamp
they say: create a text input style like the search input on TripAdvisor.
webdesign  web  design  effect  underline  type  text  input  style 
november 2017 by piperh
Alt-texts: The Ultimate Guide - Axess Lab
v handy guide to alt texts, explaining some do's and dont's and why.
webdesign  web  design  code  coding  alt  text  image  accessibility  accessible  screen  reader 
november 2017 by piperh
baffle.js
javascript library for obfuscating and revealing text in DOM elements. Nice unscrambling effect on letters to reveal a text
webdesign  web  design  effect  obfuscate  scramble  unscramble  reveal  type  text  letters  phrase 
september 2017 by piperh
GitHub - rikschennink/fitty: Makes text fit perfectly.
script to make text fit exactly in its container
js  javascript  script  fit  text 
august 2017 by piperh
Copywriter, branding, contenidos para web
copywriter linked at foot of Col.legi Oficial Disseny Gràfic, dissenygrafic.org
marketing  copywriter  copywriting  copy  text  brand  identity  naming  communication  content  barcelona 
july 2017 by piperh
Mixfont | A modern font generator
a selection of text shadow examples with their css - handy maybe for quick copying
webdesign  web  design  css  colour  text  shadow  text-shadow  syntax  example  type  h1  headline  heading  effect 
june 2017 by piperh
Lists
dummy content in list format in diff langs and content type, useful for mockups and first visuals
webdesign  web  design  graphic  content  lists  false  lorem  ipsum  loremipsum  layout  dummy  text  data 
may 2017 by piperh
Link with Gradient Underline · GitHub
use text shadow and background image to get an underline on a link. Only advantage seems to be to get descenders to have a white outline, so they look better where they pass over the underline
webdesign  web  design  css  text  shadow  underline  link  background  image  position 
may 2017 by piperh
text/ background contrast with mix-blend-mode #1
code pen showing fancy use of contrasting background to maintain legibility
webdesign  web  design  contrast  text  background  mix-blend  css  technique 
may 2017 by piperh
CSS Generator Tool - CSS Demonstration and Generation
generates css code for various functions - you can test each setting first using live sliders, and the generated code changes in real time.
webdesign  web  design  css  filter  transform  shadow  border  text  generate  generator  code  test  live  experiment 
may 2017 by piperh
GSAP, the standard for JavaScript HTML5 animation | GreenSock
Greensock, a free and paid js library for animations. There's a nice lib for animating text - some great effects possible. Has a morphing plugin
webdesign  web  design  js  javascript  script  animate  animation  tween  effect  transform  css  greensock  splittext  text  morph 
april 2017 by piperh
CSS Exclusions: Making Boring Layouts Less Boring
article describing css exclusions. A method for running text about a shape. 9.2.17 only supported by late IE and Edge
webdesign  web  design  css  layout  wrap  runaround  image  text 
february 2017 by piperh
HTML5 Forms: How To Use The New Email, URL, and Telephone Input Types
good reference article about html5 input types for forms - explains some stuff about each input type. Also shows poss use of 'pattern'
webdesign  web  design  form  input  validate  type  html  tel  email  text  url  pattern 
february 2017 by piperh
List of Text Editors and IDEs
a list of text editors maintained by shlomi fish
text  editor  software  programme  app  platform  mac  windows  linux 
january 2017 by piperh
Textile Reference
sort of explanation of what textile is for with some references
webdesign  web  design  html  text  textile  cms  interface  code 
december 2016 by piperh
the new code – Wrapping Text Around A Curved Image With CSS Shapes
shows how to use css shapes for a text runaround.
15.12.16: not supported in Edge, IE or Firefox though there is a js polyfill
webdesign  web  design  css  shapes  runaround  flow  text  image  alpha  mask  layout 
december 2016 by piperh
help - Perch CMS documentation
In addition to using the help attribute you can also use the perch:help tags to display a help section at the top of your page. You can put any kind of content in between these tags – including html – so you could add a screenshot or even a video.
webdesign  web  design  perch  help  tag  attribute  section  interface  editor  cms  text  html 
december 2016 by piperh
Textile Syntax Documentation and Sandbox
reference pages showing syntax for use in textile input fields and text area
webdesign  web  design  text  textile  input  shorthand  reference  syntax  markup  markitup  code  documentation  area 
december 2016 by piperh
wysiwyg.css
styling for text generated from a wysiwyg editor (like TinyMCE) or Markdown. But BEWARE, written Sass!
webdesign  web  design  wysiwyg  text  editor  markdowncss  styles 
september 2016 by piperh
[no title]
generates hipster lorem ipsum
web  graphic  design  layout  dummy  placeholder  text  false  latin  generator 
july 2016 by piperh
Quick Tip: Single Character Transforms with CSS and JS
use css to transform individual characters inside a phrase. Requires jQuery
webdesign  web  design  animate  animation  css  js  jquery  character  text  transform 
june 2016 by piperh
Character, Letter and Word Counter | Charcounter
clean online tool to count words, characters and paragraphs. Also shows char count without white space
tool  character  word  count  counter  paragraph  length  text  online 
april 2016 by piperh
Google no longer indexing content in onLoad hidden sections? - Google SEO News and Discussion forum at WebmasterWorld - WebmasterWorld
webmasterworld forum discussion page about search results for text which is initially hidden but is present within html
webdesign  web  design  text  google  ranking  seo  toggle  toggled  search  serp  hidden  index 
november 2015 by piperh
How To Do Knockout Text | CSS-Tricks
article on how to achieve image that shows through lettering. Techniques and browser support
webdesign  web  design  knockout  text  image  cutout  background  howto 
october 2015 by piperh
Lynx Information
use Lynx to see a website in a similar way to googlebot
browser  text  reader  website  testing  accessibility  seo  optimisation 
october 2012 by piperh
Text and Image Zoom
only relates to whole page zooming
page  text  image  zoom  web  design  webdesign  code  coding  ems 
september 2011 by piperh
FitText - A plugin for inflating web type
makes text scale with window width. Works smoothly though limited application that I can see. Probably more kb's than an svg image.
jquery  plugin  typography  fonts  web  design  webdesign  text  type  fontface  @fontface  webtype  scale  scaleable  scaleability  fit  width 
may 2011 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:





to read