#Generating SVG with Custom Shape IDs | Explore Tumblr posts and blogs

suzanneshannon · 5 years ago

Text

A Font-Like SVG Icon System for Vue

Managing a custom collection of icons in a Vue app can be challenging at times. An icon font is easy to use, but for customization, you have to rely on third-party font generators, and merge conflicts can be painful to resolve since fonts are binary files.

Using SVG files instead can eliminate those pain points, but how can we ensure they’re just as easy to use while also making it easy to add or remove icons?

Here is what my ideal icon system looks like:

To add icons, you just drop them into a designated icons folder. If you no longer need an icon, you simply delete it.

To use the rocket.svg icon in a template, the syntax is as simple as <svg-icon icon="rocket" />.

The icons can be scaled and colored using the CSS font-size and color properties (just like an icon font).

If multiple instances of the same icon appear on the page, the SVG code is not duplicated each time.

No webpack config editing is required.

This is what we will build by writing two small, single-file components. There are a few specific requirements for this implementation, though I’m sure many of you wizards out there could rework this system for other frameworks and build tools:

webpack: If you used the Vue CLI to scaffold your app, then you’re already using webpack.

svg-inline-loader: This allows us to load all of our SVG code and clean up portions we do not want. Go ahead and run npm install svg-inline-loader --save-dev from the terminal to get started.

The SVG sprite component

To meet our requirement of not repeating SVG code for each instance of an icon on the page, we need to build an SVG “sprite.” If you haven’t heard of an SVG sprite before, think of it as a hidden SVG that houses other SVGs. Anywhere we need to display an icon, we can copy it out of the sprite by referencing the id of the icon inside a <use> tag like this:

That little bit of code is essentially how our <SvgIcon> component will work, but let’s go ahead create the <SvgSprite> component first. Here is the entire SvgSprite.vue file; some of it may seem daunting at first, but I will break it all down.

<template> <svg width="0" height="0" style="display: none;" v-html="$options.svgSprite" /> </template> <script> const svgContext = require.context( '!svg-inline-loader?' + 'removeTags=true' + // remove title tags, etc. '&removeSVGTagAttrs=true' + // enable removing attributes '&removingTagAttrs=fill' + // remove fill attributes '!@/assets/icons', // search this directory true, // search subdirectories /\w+\.svg$/i // only include SVG files ) const symbols = svgContext.keys().map(path => { // get SVG file content const content = svgContext(path) // extract icon id from filename const id = path.replace(/^\.\/(.*)\.\w+$/, '$1') // replace svg tags with symbol tags and id attribute return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>') }) export default { name: 'SvgSprite', svgSprite: symbols.join('\n'), // concatenate all symbols into $options.svgSprite } </script>

In the template, our lone <svg> element has its content bound to $options.svgSprite. In case you’re unfamiliar with $options it contains properties that are directly attached to our Vue component. We could have attached svgSprite to our component’s data, but we don’t really need Vue to set up reactivity for this since our SVG loader is only going to run when our app builds.

In our script, we use require.context to retrieve all of our SVG files and clean them up while we’re at it. We invoke svg-inline-loader and pass it several parameters using syntax that is very similar to query string parameters. I’ve broken these up into multiple lines to make them easier to understand.

const svgContext = require.context( '!svg-inline-loader?' + 'removeTags=true' + // remove title tags, etc. '&removeSVGTagAttrs=true' + // enable removing attributes '&removingTagAttrs=fill' + // remove fill attributes '!@/assets/icons', // search this directory true, // search subdirectories /\w+\.svg$/i // only include SVG files )

What we’re basically doing here is cleaning up the SVG files that live in a specific directory (/assets/icons) so that they’re in good shape to use anywhere we need them.

The removeTags parameter strips out tags that we do not need for our icons, such as title and style. We especially want to remove title tags since those can cause unwanted tooltips. If you would like to preserve any hard-coded styling in your icons, then add removingTags=title as an additional parameter so that only title tags are removed.

We also tell our loader to remove fill attributes, so that we can set our own fill colors with CSS later. It’s possible you will want to retain your fill colors. If that’s the case, then simply remove the removeSVGTagAttrs and removingTagAttrs parameters.

The last loader parameter is the path to our SVG icon folder. We then provide require.context with two more parameters so that it searches subdirectories and only loads SVG files.

In order to nest all of our SVG elements inside our SVG sprite, we have to convert them from <svg> elements into SVG <symbol> elements. This is as simple as changing the tag and giving each one a unique id, which we extract from the filename.

const symbols = svgContext.keys().map(path => { // extract icon id from filename const id = path.replace(/^\.\/(.*)\.\w+$/, '$1') // get SVG file content const content = svgContext(path) // replace svg tags with symbol tags and id attribute return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>') })

What do we do with this <SvgSprite> component? We place it on our page before any icons that depend on it. I recommend adding it to the top of the App.vue file.

<template> <div id="app"> <svg-sprite />

The icon component

Now let’s build the SvgIcon.vue component.

<template> <svg class="icon" :class="{ 'icon-spin': spin }"> <use :xlink:href="`#${icon}`" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { icon: { type: String, required: true, }, spin: { type: Boolean, default: false, }, }, } </script> <style> svg.icon { fill: currentColor; height: 1em; margin-bottom: 0.125em; vertical-align: middle; width: 1em; } svg.icon-spin { animation: icon-spin 2s infinite linear; } @keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } </style>

This component is much simpler. As previously mentioned, we leverage the <use> tag to reference an id inside our sprite. That id comes from our component’s icon prop.

I’ve added a spin prop in there that toggles an .icon-spin class as an optional bit of animation, should we ever need. This could, for example, be useful for a loading spinner icon.

Depending on your needs, you may want to add additional props, such as rotate or flip. You could simply add the classes directly to the component without using props if you’d like.

Most of our component’s content is CSS. Other than the spinning animation, most of this is used to make our SVG icon act more like an icon font¹. To align the icons to the text baseline, I’ve found that applying vertical-align: middle, along with a bottom margin of 0.125em, works for most cases. We also set the fill attribute value to currentColor, which allows us to color the icon just like text.

<p style="font-size: 2em; color: red;"> <svg-icon icon="exclamation-circle" /> Error! </p>

That’s it! If you want to use the icon component anywhere in your app without having to import it into every component that needs it, be sure to register the component in your main.js file:

// main.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' Vue.component('svg-icon', SvgIcon) // ...

Final thoughts

Here are a few ideas for improvements, which I intentionally left out to keep this solution approachable:

Scale icons that have non-square dimensions to maintain their proportions

Inject the SVG sprite into the page without needing an additional component.

Make it work with vite, which is a new, fast (and webpack-free) build tool from Vue creator Evan You.

Leverage the Vue 3 Composition API.

If you want to quickly take these components for a spin, I’ve created a demo app based on the default vue-cli template. I hope this helps you develop an implementation that fits your app’s needs!

¹ If you’re wondering why we’re using SVG when we want it to behave like an icon font, then check out the classic post that pits the two against one another.

The post A Font-Like SVG Icon System for Vue appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

A Font-Like SVG Icon System for Vue published first on https://deskbysnafu.tumblr.com/

2 notes · View notes

file-formats-programming · 8 years ago

Text

Export Slides to SVG by Setting Custom Shape IDs & Enhanced HTML Export for Presentation using Java

What's New in this Release?

The long awaited version of Aspose.Slides for Java 17.5.0 has been released. This is primarily a maintenance release whereby we have resolved certain issues incurring in API. Now, users can also export the slides to SVG by setting custom shape IDs that can be used by developers in their processing of exported SVG. Please visit documentation article, generating an SVG with Custom Shape IDs. It has also enhanced the HTML export for presentation by providing custom controller to embed fonts. Please visit documentation article, Embed All Fonts When Converting Presentation to HTML. This release also improved the Header/Footer support in Aspose.Slides and now users can set Header/Footer on individual slides level for normal slides, layout slides and master slides. It is pertinent to mention that if Header/Footer is defined on Master slide level then every layout slides and their respective normal slides shall inherit the same Header/Footer properties. It has improved presentation rendering support in this API and have rectified issues related to text and images rendering inside exported SVG, PDF and slide thumbnails. It also rectified issues related to exception thrown while accessing or saving presentation files in this release. This list of new, improved and bug fixes in this release are given below

Exception on converting PPTX to PDF

Implement using HeaderFooterManager for slide/master/layout

Exception on saving presentation

Exception on converting PPTX to PDF

Text changed to asterisk

PPT not converted properly to PDF

PPTX not converted properly to thumbnails

PPTX not converted properly to image

Font problem occurs

Image missing while converting PPT to SVG

Other most recent bug fixes are also included in this release

Newly added documentation pages and articles

Some new tips and articles have now been added into Aspose.Slides for Java documentation that may guide users briefly how to use Aspose.Slides for performing different tasks like the followings.

Generating an SVG With Custom Shape IDS

Embed All Fonts When Converting Presentation to HTML

Overview: Aspose.Slides for Java

Aspose.Slides is a Java component to create, read, write and modify a PowerPoint document without using Microsoft PowerPoint. It supports PHP applications and provides all advanced features for managing presentations, slides, shapes, tables and supports PPT, POT, POS PowerPoint formats. Now you can add, access, copy, clone, edit and delete slides in your presentations. It also supports audio & video frames, adding pictures, text frames and saving presentations as streams or SVG format.

More about Aspose.Slides for Java

Homepage of Aspose.Slides for Java

Downlaod Aspose.Slides for Java

#processing of exported SVG #Generating SVG with Custom Shape IDs #HTML export for presentation #presentation rendering enhanced #Header/Footer support improved #Java PPT API

0 notes

iamvector · 3 years ago

Text

How To Create Your Own Free SVG Icons

Free SVG icons are a powerful and smart means of communicating your ideas across audiences. Knowing that it would simply up the effect of your creation, these magic shapes are just so hard to overlook. Graphic designers are often found to experiment with an array of methods for using icons on their websites, applications, and other digital content.

What’s Better- Icon Fonts Or Free Svg Icons?

Although icon fonts are highly customizable with its standard CSS (Cascading Style Sheets) styling rules over image icons, their designing is quite limited to monochromatic colors, size, standard transforms, and animations, They can also turn out to be glitchy, leading to the generation of multiple server requests. Additionally, your browser’s expected failure to identify the icon font can show up a blank space instead of fonts themselves.

Now that you have a good chunk of reasons to use SVG icons, let us understand how to create your own free SVG icons. Here is much that you need to know for creating free SVG icons.

Drawing Icons

The first step to creating your own free SVG icon is to sketch them out. Draw each design on a distinct artboard and save each of them in a separate file. Now, open the vector design program of your choice. A vector image program entails drawing icons with the help of different colors, shapes, and path administration on a virtual drawing board. Following this, you export the .svg file, and the coding will take place behind the scene.

Understand The Artboards

The artboard size won’t be a matter of concern if it’s a single icon. You will just need to ensure that it has a decent size, meaning neither too large nor too small. However, if you are seeking to create a uniform icon set, your artboards should be of the same size.

Draw Over A Grid

Consider drawing the icons over a grid so they turn out as symmetrical as possible. Also, use a square Artboard and customizable stroke size for maximum efficiency. If you are creating a mono-colored icon, it would be best to set your design tool to solid black. Do not worry, as it can be easily changed in the application or the stylesheet to your desired color.

Keep Shapes Simple

While creating free SVG icons, make sure that the vector shapes are simple. It will bring out a simpler SVG code that loads in the blink of an eye and is least susceptible to show-up errors. Cut out the unnecessary points. For instance, a circle must need not more than four-vector points. Anything more than that can easily invite technical fuss.

Layer Them Right

Consolidate shapes and layer them over one another to generate versatile imagery. Transform any grouped layers, circles, or ellipses to aggravate paths. This will assist you in creating free SVG icons with small file sizes and make sure that their quality remains intact across different channels.

Add ID Tags

If your icons are ready, you are good to export and optimize them in SVG format. Once done, open the files in a code editor and assign a distinct ID tag to each SVG tag.

Using The ‘<img>’ Tag

One of the most common ways of using the SVG file icons in your design is by using the <img> tag. For example, <img src=”alert.SVG” alt=”Alert” width= “125”>. It allows you to customize the size of the image. However, one significant drawback is that you cannot do a thing about the color.

Enhancing The ‘<img>’ Tag

You can enhance the img tag with the help of fragment identifiers. These are embedded SVG properties. You can refer to an SVG component with the help of an SVG view specification. For example, <img src=”svg_file.svg#svgView(viewBox(a,b,w,h))”>

How To Insert Free Svg Icon Files

SVG images are a piece of cake to integrate into your web design. You may choose to either upload icons, the SVG code, or the SVG editor can be used to create a new SVG icon. For encoding an SVG with the help of a <img> component, you simply need to link it in the src attribute. You will also require a height or a width attribute, or both in certain cases to achieve an effective integration.

Editing Free Svg Icons

A modifiable SVG refers to the use of SVGs in HTML documents with their code embedded directly in the document rather than importing them from a file. These are created by employing tags such as <svg> </svg>.

#svgicons #vector icons #free vector icons

0 notes

firmblog488 · 4 years ago

Text

Design Workshop Lite Free Software Download

Design Workshop Lite free. software download Windows 10

Workshop Design Software

Workshop Design Software Free

Tf3dm 3d Models

Design Workshop Lite free. software download Cnet

License: All 1 2 | Free

Welcome to Design Workshop. We are dedicated to creating quality landscapes that meet today’s needs and endure for future generations. We use landscape architecture, urban design, planning and strategic services to create a resilient legacy for our clients, our communities and the well-being of our planet. Design Workshop, free design workshop software downloads. File Name: design-icons.zip Author: Aha-soft License: Demo ($129.00) File Size: 4.41 Mb Runs on: WinXP.

Using novaPDF Lite you can easily create high quality searchable PDF files in an affordable and reliable way from any Windows application. It installs as a printer driver and helps you generate the PDF files by simply selecting the 'print' command from any application (you can convert your Word documents, Excel sheets, PowerPoint presentations, AutoCad drawings, companyâ€™s reports,...

Category: Business & Finance / Business Finance Publisher: Softland, License: Shareware, Price: USD $19.95, File Size: 1.6 MB Platform: Windows

Colorful Music Editor Lite Version is a very easy to used music edit tools, you can join, split, and add any audio effect to you music file to create a new music.You can save part of audio file into new audio file and add audio effect to output file such as zoom in , zoom out and so on. Large number of audio format are supported. What's Features 1. Join parts of any audio file into...

Category: Audio Publisher: Colorful Software, License: Shareware, Price: USD $19.90, File Size: 6.6 MB Platform: Windows

Looking for a smart, powerfull and easy to use DJ software? Look no more! Meet FutureDecks Lite - the affordable professional DJ mixing software With FutureDecks Lite you can mix your songs like a pro DJ. Beat-matching is just a click away and also are seamless beat-aware loops and many other things. All theese thanks to the precise automatic BPM counter. You have a...

Category: Audio / All-in-One Jukeboxes Publisher: XYLIO INFO SRL, License: Demo, Price: USD $39.50, EUR29.5, File Size: 4.4 MB Platform: Windows, Mac

3D Topicscape Lite uses the concept-mapping or mindmapping approach to allow ideas and information to be organized, but in place of the usual 2D sheet, it works in 3D. This lets you plan your work as the ideas flow and see your to do list in an unlimited 3D mindmapping landscape. ( Comparison of Lite and Pro versions: http://www.topicscape.com/Pro-features.php ). If you think...

Category: Business & Finance Publisher: 3d-Scape Limited, License: Shareware, Price: USD $49.99, File Size: 26.2 MB Platform: Windows

Cross-Database Comparator Lite is a powerful easy-to-use ODBC based tool for comparison of heterogeneous databases, used by thousands DBAs, developers and testers all over the world. Product has earned this position owing to its high performance and friendly user interface, combined with rich functionality and wide features spectrum. Cross-Database Comparator Lite is intended for...

Category: Business & Finance Publisher: dbBalance Ltd., License: Shareware, Price: USD $299.00, File Size: 6.3 MB Platform: Windows

Using novaPDF Server Lite you can easily create high quality searchable PDF files in an affordable and reliable way from any Windows application. It installs as a printer driver and helps you generate the PDF files by simply selecting the 'print' command from any application (you can convert your Word documents, Excel sheets, PowerPoint presentations, AutoCad drawings, emails or web...

Category: Business & Finance Publisher: Softland, License: Shareware, Price: USD $19.95, File Size: 1.7 MB Platform: Windows

PDF-XChange Lite is a reduced version of PDF-XChange Standard that contains basic features for use when printing documents virtually. It combines high quality conversion with optimized compression to create professional documents that are comparatively small in size. It installs in the same manner as a standard printer and can be selected as desired to print/convert documents into...

Category: Utilities / Printers Publisher: Tracker Software Products Ltd, License: Freeware, Price: USD $0.00, File Size: 31.4 MB Platform: Windows

Program supports all voice modems. . .

Category: Business & Finance Publisher: Phone Server Lite, License: Shareware, Price: USD $99.95, File Size: 273.4 KB Platform: Windows

RiskyProject Lite is a schedule risk analysis software. RiskyProject Lite is seamlessly integrated with Microsoft Project and can be also executed as a standalone application. You can define project schedule in RiskyProject Lite, Microsoft Project, or can import it from other project management software including Oracle Primavera, Safran Project, MindManager, or other...

Category: Business & Finance / Project Management Publisher: Intaver Institute Inc., License: Demo, Price: USD $999.00, CAD999, File Size: 14.7 MB Platform: Windows

Timesheets Lite is our multi user timesheet program that is free for single database connections (2-3 users). It is ideally suited to a project based environment where you need to track and bill your employees time against projects. Key features of Timesheets Lite include: An older version is completely free for use for single connections (up to 3 users) Simple to use...

Category: Business & Finance Publisher: Timesheets MTS Software, License: Shareware, Price: USD $29.00, File Size: 4.3 MB Platform: Windows

Customer data, sales data, order data, classification data, sales results, budget administration, various testing data, questionarie tabulation, etc. Transforms data to fit your needs while simplifying everyday data processing with just one click. Waha! Transformer Lite is a tool that frees you from messy data conversions without any programming. This automatic data transformer can...

Category: Business & Finance Publisher: Beacon Information Technology Inc., License: Demo, Price: USD $99.95, File Size: 15.7 MB Platform: Windows

Multilizer Lite for Developers is an easy-to-use tool for localizing software developed with the most common software development tools. Multilizer Lite for Developers enables localization of standard Windows binaries (.exe, .ocs, .dll, ...), VCL binaries (binaries compiled with Delphi/C++Builder), Visual Studio .NET solutions and projects, and .resx files.

Category: Software Development Publisher: Multilizer (Rex Partners Oy), License: Demo, Price: USD $375.00, File Size: 5.9 MB Platform: Windows

Multilizer Lite for Documents is an easy-to-use tool for localizing documents in the most common document formats. Multilizer Lite for Documents enables localization of typical text documents, such as HTML (.html, .htm, .php, .asp, etc.) including embedded scripts (JScript for example), XML (.xml, .svg, and all others), and any other text files with regular expressions.

Category: Software Development Publisher: Multilizer (Rex Partners Oy), License: Demo, Price: USD $375.00, File Size: 2.6 MB Platform: Windows

AD Picture Viewer Lite is a compact, easy-to-use image viewer. It's support all popular image file formats and have many useful features such as opening images in folder with or without subfolders, viewing them in slide-show mode, a flexible and powerful image printing tool and so on. AD Picture Viewer Lite has many powerful features: a easy-to-use and intuitively user...

Category: Multimedia & Design / Graphics Viewers Publisher: Abroad Design, License: Shareware, Price: USD $19.95, File Size: 1.6 MB Platform: Windows

SignGo Lite signmaking software has everything you need to make professional signs. Create text, shapes and freehand graphics at any size to cut in vinyl. SignGo Lite includes essential sign making tools such as InlineOutline, welding, text on arc and node editor. Import or paste graphics from your favourite graphics program and use the powerful cutting utility to drive your...

Category: Multimedia & Design Publisher: Wissen UK Inc. Ltd., License: Shareware, Price: USD $139.00, File Size: 9.2 MB Platform: Windows

Absolute Log Analyzer Lite is an ideal website analysis tool for small websites (up to 5 domains). Priced at only $50, it contains 90 reports that let you evaluate your website performance, see where your visitors come from, analyze which keywords and keyphrases are most effective. The program automatically detects the format of your log files, keeps the database of old log files,...

Design Workshop Lite free. software download Windows 10

Category: Internet Publisher: BitStrike Software, License: Shareware, Price: USD $49.95, File Size: 1.4 MB Platform: Windows

Safety above all - and we guard our computers with antivirus programs, firewalls, etc. Privacy is essential - and we... enter the Internet without giving a tiniest thought to protecting our private information. Your IP address, in other words your computer ID, as well as the location of your computer, the language your OS uses and other details are monitored and very often logged for future use...

Category: Internet Publisher: ThankSoft, License: Shareware, Price: USD $25.00, File Size: 1.5 MB Platform: Windows

JitBit Macro Recorder Lite is a simple and low cost automation system to record keyboard, record mouse movement, record mouse clicks. All recorded keystrokes and mouse activity can be replayed or saved to disk for later use. This utility will save you a lot of time on repetitive tasks. Use it to automate ANY activity in ANY windows application, record on-screen presentations and...

Category: Utilities Publisher: JitBit Software, License: Shareware, Price: USD $27.85, File Size: 1.1 MB Platform: Windows

All-in-one MIDI musical instrument with Arpeggiator and MIDI / MIDI Karaoke Player (Lite version). Allows to play piano on PC keyboard, play with any MIDI file and sing at the same time. Works with any hardware or software synthesizer installed in your computer. Includes 'basic' Java Soundbank, which can be easily upgraded to 'deluxe' Soundbank. Easy to learn and use for inexperienced...

Category: Audio Publisher: ArptonSoft, LLC, License: Shareware, Price: USD $24.95, File Size: 1.3 MB Platform: Windows

Brainstorm Lite is a very restrictive brainstorming application that forces you to follow some core brainstorming rules thus achieving better results in less time. The software tracks brainstorming time and prohibits the user from entering new ideas after the time is up. This is used to inspire creativity because everyone knows how much time is left to generate new ideas and that there...

Workshop Design Software

Category: Business & Finance Publisher: Computer Systems Odessa, License: Freeware, Price: USD $0.00, File Size: 579.9 KB Platform: Mac

Task Fields: Task Number (auto assigned), Description, Long Description, Status (lookup, ie: New, Open, Closed, Dependancy), Status Note (reason for Status), Severity (Low, Medium, High, Urgent), Category (lookup, ie: Bug, Enhancement, File Change), Module (lookup, ie: A/R, Payroll, G/L, A/P), Received (date task entered/received), Phase (lookup, ie: Requirements, Analysis, Design), %...

Category: Business & Finance Publisher: Berthume Software, License: Shareware, Price: USD $27.00, File Size: 5.1 MB Platform: Windows

EMS SQL Manager for MySQL is a high performance tool for MySQL Database Server administration and development. SQL Manager for MySQL works with any MySQL versions from 3.23 to 5.2 and supports all of the latest MySQL features including views, stored procedures and functions, InnoDB foreign keys and so on. It offers plenty of powerful tools for experienced users to satisfy all their needs. SQL...

Category: Business & Finance Publisher: EMS Database Management Solutions, Inc, License: Freeware, Price: USD $0.00, File Size: 21.6 MB Platform: Windows

EMS SQL Manager for PostgreSQL is a powerful tool for PostgreSQL Database Server administration and development. PostgreSQL Manager works with any PostgreSQL versions up to 8.2 and supports all of the latest PostgreSQL features including tablespaces, argument names in functions, and so on. It offers plenty of powerful tools for experienced users such as Visual Database Designer, Visual Query...

Category: Business & Finance Publisher: EMS Database Management Solutions, Inc, License: Freeware, Price: USD $0.00, File Size: 17.6 MB Platform: Windows

Gold Calculator Lite Computes Gold, in Kilos, Oz, Dwt, grams, and grains to market price. A Must For All Jewelry Professionals, Pawnbrokers, Jewelers, Refineries, Investers, Laylmen. Just enter Gold Spot or Market Price and Gold Calculator Lite will do the rest. No system requirements. Uses virtually No system resources. The latest Runtime files are included with the application....

Workshop Design Software Free

Category: Business & Finance Publisher: Gold Calculator, License: Freeware, Price: USD $0.00, File Size: 1.6 MB Platform: Windows

Tf3dm 3d Models

Tm Desktop Utilities Pack. Includes 3 freeware utilities: Desktop Metric Conversion Calculator, Desktop Loan Repayment Calculator, Desktop Credit Card Validator in one program. All of them have an intuitive interface and simple to learn and use.

Design Workshop Lite free. software download Cnet

Category: Business & Finance Publisher: TM Services, License: Freeware, Price: USD $0.00, File Size: 465.5 KB Platform: Windows

0 notes

holytheoristtastemaker · 5 years ago

Link

The best new tools for designers are ones that make your life easier and your workflows faster. You’ll find some of those in this list this month for sure. From tools to help you capture and manage color palettes to AI-powered design analytics to simple animations, there’s something for almost every designer or developer.

Here’s what new for designers this month.

The Hero Generator

The Hero Generator is a fun tool that will help you create just the right hero header without having to write the code yourself. Upload your image, set some specs for spacing and color, add a button, and out comes the code for an example that you can build right on the screen. Make sure to play with the gradient overlay to get just the right color and orientation to ensure that your hero header looks great and includes highly readable type.

Sorted Colors

Sorted Colors groups named CSS colors in a way that shows related colors together. It’s a nice way to check colors side by side when you are trying to make a final decision about a hue or color palette. You could also use it to create a monotone palette.

Attention Insight

Attention Insight is an AI-powered design analytics tool that allows you to compare multiple designs and to measure which object attracts the most attention. It uses a combination of heatmaps, percentage of attention metrics to help measure the overall clarity of your design. New features, such as a contrast checker, are also in the works. It works as a web app, plugin for popular software, or a Chrome extension.

Color Copy Paste

Color Copy Paste is an app that you can use to capture a color from practically anything and then paste it to Figma, Sketch, or a web browser. It’s a quick way to snag little bits of inspiration when you see them.

Runme

Runme, which is still in beta, allows you to build, deploy, and launch an application from any public Git-repo with one click. Enter a URL and a few commands and you are ready to go. This is an open-source tool and contributions are welcome.

Rough Notation

Rough Notation is a small JavaScript library to create and animate annotations on a web page. It uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured or turned off. Choose from options to underline, box, circle, highlight, cross off, strikethrough, group items, and more.

Trails

This is a simple, but useful goodie. Trails is a simple geometrical trail on an x and z axis that you can attach to Three.js objects. The simple animation is mesmerizing.

Pose Animator

Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on a recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters. (It’s a fast way to cartoonize yourself.) You can build from a webcam video or single image in Chrome or Safari.

Neumorphism UI

Neumorphism UI is a user interface kit packed with components in the neumorphic style. It includes more than 200 components, 10 sections, and five example pages to build a website in this style.

3D Photography Using Context-Aware Layered Depth Inpainting

This project by a group of researchers proved that you can convert a single RGB-D image into a 3D photo, much like what you’d see from an iPhone. The included source code shows how to use a layered depth image as part of a learning-based model that creates a three-dimensional effect.

Meanderer

Meanderer is a micro-library for scaling CSS motion path strings. And it looks pretty nifty. All you need is an object with a path (typically an SVG) and you are ready to try it out.

Underline Animation

Sometimes it is the most simple of animations that can have the greatest impact on a design. This Underline Animation pen from Aaron Iker is an example of that with a nifty little underline that moves to an arrow.

Create a Hamburger Menu in SVG & CSS

Love it or hate it, you’ll probably need to create a hamburger menu element at some point. This great tutorial from UX Collective explains how to do it from start to finish using an SVG icon and CSS. (This lesson is designed so almost anyone with a little dev knowledge can follow along with success.)

Blush

Blush is a fun, semi-custom illustration generator. It uses drawings from artists around the world with parts and color options that you can mix and match to get just the right illustration for your design project. Choose your specifications and download a PDF. It’s that easy.

Supabase

Supabase in an open-source alternative to Firebase and adds real-time and restful APIs to Postgres without code. (It’s in Alpha and free to use during that time.)

Fluent Icons

Fluent Icons includes 965 icons in a Microsoft-esque style. These colorful and consistent icons are ideal for use across apps, presentations, websites, and infographics. (Free and paid options available.)

One Word Domains

Looking for a quick and easy to remember domain name? One Word Domains lets you search all the available one-word domains available for purchase.

Free Device Icons

This set of free device icons includes 67 elements that represent user interfaces and devices. They come in multiple file formats – SVG, EPS, PNG, and AI – as a line-style vector.

Windups

Windups is a tool to help you add a typewriter-style animation to text elements. It’s a fun way to help people through your design and build dynamic content. You can see how engaging it is by playing with the Windups site with building blocks of text and “continue” buttons.

Glorious Glyphs Game

Test your typography IQ with the Glorious Glyphs Game game from ILoveTypography.com. The game includes 30 questions about glyph characters, where you have to ID a font. It’s a lot tougher than you might think!

Cosmos

Cosmos is a beautiful and colorful gradient font family. It contains letterforms with hologram, multicolor, minimal, glitch, and blur options is a readable and trendy style. This premium font family is available by the style or altogether.

Ephemera

Ephemera is a groovy novelty-style typeface that has fun lines, plenty of common shapes and elements, and glyphs that pair for exceptional letter combinations. It could make a nice brand mark or an interesting display type element. It includes upper- and lowercase characters, numerals, and some extras.

Kavo Serif

Kavo Serif is clean, modern typeface with five weights, and even includes logo templates. It’s a versatile font that works great in large and small sizes.

Republiko

Republiko is a modern display typeface with regular and outline styles. While it is designed for display, the characters remain readable at smaller sizes as well.

TT Lakes Neue

TT Lakes Neue is a font superfamily with 91 styles. It’s got a nice geometric shape and the package even includes a variable font. This is a premium typeface that you can buy individual styles or the complete package.

Typo Ring

Typo Ring is a super round typeface with plenty of weights (although the free version has limited character sets). It’s highly readable and includes upper- and lowercase letters.

XXIX

XXIX is a bold, futuristic slab with fun shapes and slants. It’s an all uppercase option with a limited set of numerals and glyphs.

Source

0 notes

lyndastreaming · 5 years ago

Text

Illustrator CC 2015 One-on-One Fundamentals

Title: Illustrator CC 2015 One-on-One Fundamentals ID: c801c83658dcb1c185ca3e5ba5393171 Original Page: Illustrator CC 2015 One-on-One Fundamentals Released: 9/23/2015 Duration: 17h 11m Author: Deke McClelland Level: Beginner Category: General Subject Tags: Software Tags: Description: Want to master the most powerful vector-based drawing program on the planet? It starts with getting the most comprehensive training available. With all-new movies and all-new exercise files, Illustrator CC 2015 One-on-One: Fundamentals is the first in a series of three courses by industry pro Deke McClelland. With these tutorials, you’ll be able to create amazing works of art and design. You’ll get exactly what you need to know, in the order you need to know it, whenever it’s most convenient for you to learn.

Start watching to learn how to create multipage documents with artboards; how to draw anything you can imagine with the Pen, Pencil, and Curvature tools; and how to start adding color to your artwork with swatches. Deke also covers drawing shapes, adjusting strokes, formatting text, and painting digitally, with or without a tablet. Each chapter should leave you with a new set of skills��and a sense of accomplishment.

And as Creative Cloud evolves, so will we. Check back every time Illustrator updates for new movies, new feature reviews, and new ways to work.

Topics include:

Opening, creating, saving, and closing documents Working with artboards Zooming and panning Drawing lines, arcs, grids, and spirals Drawing shapes Creating compound paths Working in RGB vs. CMYK color modes Creating and applying swatches Adjusting the line weight of strokes Formatting text Building custom paths with the Shape Builder and Join tools Freeform drawing with the Pencil Painting and erasing artwork Painting with a tablet Drawing with the Curvature tool

Course Content: (Please leave comment if course url is broken)

Welcome to One-on-One

A first look at using Illustrator

Opening from the Windows desktop

Opening from the Macintosh Finder

Creating a new document

Points, picas, and other units

The advanced document settings

Modifying your new document

Saving your changes

Closing open documents on the PC

Closing open documents on the Mac

The Start screen and Recent Files panel

Pages of any size, at any angle

Using the Artboard tool

Undo, Redo, and Revert

Deleting and scaling artboards

Creating and duplicating artboards

Artboard tips and tricks

Introducing the Artboard panel

Autoarranging artboards

Artboards and rulers

Navigating your artwork

Zooming in and out

Using the more precise Zoom tool

Animated zooming and GPU performance

Scrolling (or panning) a document

Specifying a custom zoom level

Working with multiple open documents

Panels and workspaces (important!)

Cycling between screen modes

Now, we draw

Creating center guides

Using the Line Segment tool

Drawing straight lines

Duplicating and extending

Using the Move command

Introducing the Scissors tool

Joining your line segments

Using the Arc tool

Using the Rectangular Grid tool

Using the Polar Grid tool

Using the Spiral tool

Adding a circular end to a spiral

Adjusting the curvature of an arc

Centering all artwork on an artboard

And now, we draw better

Creating a time-saving template

Using the Ellipse tool

Live ellipses and pies

Drawing two perfect circles

Creating compound paths

Using the Rectangle tool

The dynamic round corner controls

Adding some simple reflections

Rotating your artwork into position

Using the Polygon and Star tools

Working with live polygons

Creating the perfect 5-pointed star

Repeating stars in alternating rows

Introducing the Group Isolation mode

Adding a drop shadow to a layer

Using the crazy Flare tool

The top-secret tilde key trick

How color works

The color modes: RGB vs. CMYK

Hue, Saturation, and Brightness

Selecting a color from the spectrum ramp

Creating and applying swatches

Working with global swatches

Searching swatches by name

Auto-deleting and adding swatches

Using the Eyedropper tool

Loading swatches from another document

The rich world of strokes

Adjusting the line weight

How strokes align to path outlines

Caps, joins, and miter limit

Making practical use of caps and joins

Dashes and arrowheads

Variable-width strokes

Numerically adjusting Width Points

Custom aligning strokes to paths

Creating a custom Width Profile

Creating a classic round-dotted outline

Drawing a quick-and-dirty gear

Combining multiple strokes

Offsetting strokes to simulate depth

Text at its best

Setting up page margins

Placing and flowing text

Creating multicolumn text frames

The Smart Punctuation command

Working with point type

Formatting display text

Fitting headline and optical kerning

Formatting body copy

Creating a drop cap

Wrapping text around a graphic

Resolving widows and orphans

Finding a character with the Glyphs panel

Creating a paragraph style

Redefining a paragraph style

Creating type on a path

Join and the Shape Builder

Using the Join command

Using the Join tool

Using the Shape Builder tool

More ways to use the Shape Builder

Creating a real-world project

Creating an inset reflection

Coloring a path with the Shape Builder

Sculpting with variable-width strokes

Converting text to path outlines

Gap detection and path splitting

Drawing with the new Shaper tool

Combining paths with the Shaper tool

Editing paths inside a Shaper Group

The world’s best freeform drawing tool

Drawing freeform path outlines

The Smooth tool and Path Eraser

Extending and connecting paths

Drawing straight and perpendicular lines

Creating a tracing template

Combining the Pencil with a drawing tablet

Coloring your Pencil tool art

The best tools for painting

Painting with the Blob Brush

Fusing path outlines together

Introducing the Eraser tool

Reassigning keyboard shortcuts

Merging selected paths

Releasing compound paths

Erasing and smoothing lumps

Painting with a few simple clicks

Reducing the roundness value

Painting with a drawing tablet

Drawing one point at a time

Drawing with the Curvature tool

Working with smooth and corner points

Curvature tool curiosities

Creating quick smooth shapes

Tracing a custom path outline

Drawing slender, organic forms

Adding line art embellishments

Creating a paint-splattered background

The tool that can draw anything

Creating corner points

How smooth points work

Drawing smooth points

Creating cusp points

Using the Anchor Point tool

Real-world drawing with the Pen tool

Drawing perspective edges

Drawing a few distress marks

Drawing a long perspective shadow

Getting smooth results from smooth points

Giving a letter a 3D beveled edge

Combining curved and straight segments

A preview of round corners

Making corners smooth

The round corner widget

Rounding off corner points

Changing the corner type

Rounding characters of type

Absolute vs. relative rounding

Drawing with rounded rectangles

Drawing an iPhone

Decorating an iPhone screen

Drawing a leather smartphone case

Colorizing a line art template

Turning corners into organic curves

Reshaping rounded paths

Saving for devices and the web

Aligning objects to the pixel grid

Turning on pixel grid alignment

Pixel grid “gotchas”

Introducing the Save for Web command

Scaling your art to suit its destination

For devices and presentations, use PNG

Saving an 8-bit graphic

Saving a JPEG image

Saving vector-based SVG files

Assigning a copyright

Using the Export for Screens command

Using the Asset Export panel

Until next time

The post Illustrator CC 2015 One-on-One Fundamentals appeared first on Lyndastreaming.

source https://www.lyndastreaming.com/illustrator-cc-2015-one-on-one-fundamentals/?utm_source=rss&utm_medium=rss&utm_campaign=illustrator-cc-2015-one-on-one-fundamentals

0 notes

siliconwebx · 6 years ago

Text

Divi Plugin Highlight: Divi Toolbox

Divi Toolbox is a third-party plugin that adds a lot of new effects to Divi that would normally require CSS, JavaScript, PHP, or lots of individual plugins. The effects are easy to use and customize and give your Divi website some extra sparkle to stand out from the crowd.

Effects include site-wide changes, new mobile menus, particle backgrounds, footers, widgets, styling, animations, headers, navigation, new blog layouts, Divi layouts in new locations, login screen customization, popups, and lots more. Many of the features can be styled with new additions to the theme customizer. Divi Toolbox does not work with Extra or the Divi Builder plugin.

Divi Toolbox General Settings

The Divi Toolbox option screen is added to the Divi dashboard menu. Settings are enabled here, but the adjustments are made in the customizer.

The General settings includes global headings style, customize login page, hide projects, allow SVG file type uploads, custom browser scrollbar, 404 page settings (choose a layout and hide the header and footer), and social icons settings (enable styling, open in a new tab, and add more icons).

Adding more social icons opens a field where you can enter the URL for 9 more social networks.

Here’s the General tab in the customizer, where I can adjust the settings that I enabled. Settings include headings and fonts, the browser scrollbar, and the login screen. In this example, I’ve made a few adjustments to the h1 and body text and added styling to the scrollbar. I’ve also added more social icons.

For the login screen, you’ll have to make your changes and then log out or view the screen in another browser.

Here’s my login screen after adding a background image, logo, and changing the size and colors of the fields and the text. It does take a little tweaking since you can’t see the screen as you make your changes.

Divi Toolbox Header Settings

The Header settings add styling to the menu, enable a custom dropdown menu, add a CTA menu button, change the logo on fixed menu, enable overlapping logo, and add a Divi layout before navigation on the home page, and a layout before and after navigation on other pages.

The CTA menu button lets you apply the CTA to the first or last menu item, or apply a custom class. It provides the CSS and instructions on where to add it.

Here’s customizer for the header. I’ve added a layout above the menu (in this example it’s just a text module, but you can add a complete layout if you want). The overlapping logo has a square box with shadow effects. I changed the logo size from 200 to 140 and moved the social icons to the main menu. I’m hovering over the Services menu item so you can see the CSS effect.

Divi Toolbox Footer Settings

Footer settings include a sticky footer, footer reveal, customize menus and widgets, customize the back to top button (which adds a custom button link option), and add before and after footer layouts.

In this example, I’ve changed the header and menu fonts to all caps and increased the spacing. I’ve also adjusted the hover colors and added an icon next to the text on hover. I’ve added a layout after the footer layout. This one uses a revealed footer (which is why the text is behind the text module above it).

I’ve styled the back to top button so it displays text. It has a shadow effect and I’ve adjusted its location. I left the colors at default. I’ve centered the bottom text and social icons. For the hover effect I chose Grow (it also includes shrink, move up, move down, wobble, heartbeat, jello, and pulse). I’m hovering over the Facebook icon so you can see the effect.

Divi Toolbox Mobile Settings

The Mobile settings include a field to enter the mobile menu breakpoint (the exact screen width when the menu changes from desktop to mobile), custom styles, change the logo, choose the hamburger icon click effect, collapse the nested sub-menu, and enable several CSS classes. The CSS classes allow you to reverse the columns and center the text, modules, and buttons.

Here’s a look at the page in Google Chrome with Responsive selected. As soon as I took the screen size less than 980 pixels it changed to the mobile icon that I selected and added the hamburger menu with animation that I chose.

In this screen, I’m styling the mobile menu’s background color, hover background color, and hamburger menu. I’ve changed the text for the main menu items to all caps and left the CTA text standard. I also changed the background for the CTA menu item. You can also adjust the menu and icon size.

Divi Toolbox Blog Settings

The Blog settings allow you to customize the sidebar and widgets, the post meta, the archive and category pages, choose a layout (from 6 options), hide the archives sidebar, and customize the read more button text.

For single posts you can choose the sidebar layout, hide the post title, add an author box, add previous and next links, add related posts, and customize the comments form. You can also add custom layouts after navigation to single posts, archives, categories, author pages, and search results pages.

For the blog page, I added a shadow effect to the sidebar, changed the fonts and their styling, and styled the search box and increased the size of the border. It uses an alternating layout and I customized the read more button text.

This example is layout 6. I’ve customized the meta font colors again and added a hover color. I’ve also customized the read more button background.

The individual blog posts let you customize each of the elements that you added in the blog settings. In this screen, I’m customizing the related posts, next and previous links, and the author box. You have control over all of the text, colors, shadows, etc.

In this example, I’m customizing the comments form. You have control over the field’s colors (both focus and non-focus), border, text, colors, button, etc. I’ve changed the button background color, the field’s focus color, added a border to the field, and changed the radius.

Divi Toolbox Modules Settings

The Modules tab provides settings to add a follow-the-mouse hover effect, add a slim email opt-in (it provides CSS for three different options), secondary buttons (which adds a new layer of customization), and lots of tweaks.

The tweaks include an animated triangle icon for accordion and toggle modules, removing the horizontal bottom border and padding for pricing tables, moving the portrait image below the content in testimonials, hide horizontal scrollbars, and adding CSS to vertically align columns and to change the height of any element to 100% of its viewport height.

Here’s a look at the slim email opt-in. It places all of the fields on a single line. This example also uses the secondary button. Only the buttons that I’ve added the CSS class to will get these changes. Using the CSS class means that I now have two global button styles.

Divi Toolbox Extras Settings

The Extras tab includes preloaders, popups, particles background, 3D tilt effect, and parallax scrolling for modules.

There are 12 preloaders to choose from. You can have them to only appear on the home page if you want, and select their transition type and speed. The selector screen shows the preloaders’ animations. You can customize them further in the theme customizer.

Trigger the popups with any link from a menu item, button, link in text, etc. Create as many as you want. Choose any premade layout for the popup. Customize the background and close button in the customizer.

This is moving particles. You have full control over the color, shape, number of particles, speed, size, line size, opacity, and interactivity. There are two CSS ID’s for particles, letting you have two different designs.

Here’s a look at the tilt feature. You can adjust the tilt, perspective, scale, speed, and glare. Add it to any section, row, or module.

Divi Toolbox License

There are two licenses to choose from:

Regular License (for use on one project) – €49.00

Extended License (for use on unlimited projects) – €169.00

Ending Thoughts

I’m impressed with the amount of features and settings this plugin has. I especially like that it adds related posts, previous and next links, and an author box to blog posts that are not created with the Divi builder. The scrollbar is also a nice touch.

There are a few settings that you can get to in the Divi modules, such as header text, but this provides more detail for those settings. I would like to see a few more adjustments added (for example, shadow effects for the comments box, more logo option, social media icon placements, etc.).

If you’re interested in added a ton of new effects to Divi in the easiest way possible, Divi Toolbox is worth a look.

We want to hear from you. Have you tried Divi Toolbox? Let us know about your experience in the comments below.

Featured Image via vasabii / shutterstock.com

The post Divi Plugin Highlight: Divi Toolbox appeared first on Elegant Themes Blog.

😉SiliconWebX | 🌐ElegantThemes

#Silicon Web Design #Ahmedabad #India #Web Development #WPBeginner #Silicon URL #Web Site #Cloud Host

0 notes

ihelpsellllc · 7 years ago

Text

What’s New for Designers, June 2018

Sourced From: https://www.webdesignerdepot.com/2018/06/whats-new-for-designers-june-2018/

No summertime blues here. With so many new tools, the dog days of summer will be filled with playing with new elements and expanding your design portfolio.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

Cool Backgrounds

Cool Backgrounds is a pretty nifty tool to help you create a trendy background element with color and gradients and shapes. You can create images for blogs, social media and full website designs as well as desktop wallpapers. The options are beautiful without any changes but you can also create customizations in the still, and animated, background options. Just make what you like in-browser and download.

Record Label Logos

Record Label Logos is a great collection of visual inspiration. The project by Reagan Ray is a curated collection of some of the best record label branding and logos of all time. Some of the old-school logos are just phenomenal. Browse and feel inspired.

Beagle

Beagle is a security tool that is designed to help secure your website before hackers break in. You can test security and see all the results in an intuitive dashboard that details each security scan.

Priority Nav Scroller

Priority Nav Scroller is the tool for you if you want to prioritize website navigation and works particularly well with a large number of links or if you need additional inline controls. The simple script is easy to use and install and has a clean design.

Codacy

Codacy helps you improve code and automate code reviews. It’s designed as a productivity tool for software dev teams. Check style, security, duplication, complexity and coverage on every change while tracking code quality.

Bokeh Effect

Bokeh Effect is for everyone who loves trendy faded background bubbles or blobs. This CSS animation includes a soft effect that’s interesting without being overwhelming. Check out Louis Hoebregts project on Codepen.

Rainbow Hover Buttons

Rainbow Hover Buttons are a groovy little bit of code that creates a fun hover state for clickable elements. Check out the code from Varun Vachhar.

Critters

Critters is a Webpack plugin to inline critical CSS and lazy-load the rest. What’s different about this library is that it doesn’t use a headless browser to render content. It is fast and lightweight and is great for single-page applications.

Solna

Solna is the world’s first invoicing platform that is powered by credit score data. Designed for small business owners and freelancers, the tool helps you automate cash flow and reduce exposure to risk. The tool allows you to create custom invoices, automated reminders, upload bulk data, track invoices and see reports and it is free to use. Right now Solna is made for users in the UK, but you can sign up to be notified as the international launch expands.

Fathom Analytics

Fathom Analytics is a new alternative to website data collection without sharing or selling collected data. It tracks everything you expect – users, key actions, etc. The tool is open-source and is in the pre-launch stages, but it looks like a great start to a new kind of analytics product that you can take a look at on GitHub.

Wallpaper Generator

Wallpaper Generator is a simple tool to create different wallpaper and background patterns. Just toggle the controls in the pen by Tim Severien to create something for your project.

Goat

Goat is a tool that teams have been needing: It is a URL shortener that’s made just for private teams or groups. And it is designed so that only your team can access links, such as those in shared folder. Plus you can great link groups and integrate it with your team on Slack.

Roast

Roast is a static web host that “just works” for plain HTML (Jekyll, Hugo, etc.) and React/Angular/Vue. It includes secure HTTPS, fast AWS CDN, SEO reporting and server-side rendering with free and paid plans.

Wired Elements

Wired Elements is a kit of UI elements in a hand-drawn style. While there aren’t a lot of projects where you can likely use this, it’s pure fun. The elements are drawn with randomness so that everything looks like you just sketched it out.

Optic

Optic is an artificial intelligence pair-programming tool to help automate ordinary tasks to improve workflows. Use it to connect projects with similar code and files, ask questions from your IDE and to highlight code and get suggestions.

Lord Icon

Lord Icon is a set of 50 SVG animated icons. They might look simple, but these little gems can add a lot of spark to buttons and elements throughout your design. Customize them with color and scaling to fit your design.

12 Languages Icons

12 Languages is an icon shot that shows personas to match languages in your design. Each illustration is featured in a simple cartoon style.

Clothes & Shopping Icons

Clothes & Shopping Icons is a set of line-style vectors that could work great for online shops or ecommerce. Each icon file comes in multiple file formats for ease of use and quick customization.

Libmoji

Libmoji is a tiny library for making Bitmoji avatars. It uses the Bitmoji avatar-building API to render previews with certain characteristics and allows you to integrate this style of avatar without a Bitmoji or Snapchat account.

Winds

Winds is an open-source RSS and Podcast app. Use it to listen or play with the code to customize your own listening or reading experience. It includes machine learning that will help find content that matches your tastes. (Plus, there’s already a UI/UX stream to get started.)

Tutorial: 1 Element CSS Rainbow Gradient Infinity

CSS Tricks has a fun tutorial to create a 1 Element CSS Rainbow Gradient Infinity. The quick tutorial walks you through creating the shapes and gradient in CSS with step-by-step instructions and code snippets so you can walk through it with ease.

Tutorial: Building a Responsive Image

Still not exactly sure how to create a responsive image or logo in the most efficient manner? Nils Binder has a great tutorial (with demo content) to get you through it. From the designer: “I got the idea to build a logo file for our company, that not only reacts to the browser width but instead adapts while respecting its aspect ratio. So you can use it anywhere, and the file itself chooses which version to show depending on the size it’s given.”

Cannes

Cannes is an art-deco style typeface with neat ligatures. This display typeface includes a modern stroke style and is free for personal and commercial use.

Delicious Adventures

Delicious Adventures is a simple novelty font in a clean, almost-handwriting style. It comes with upper- and lowercase letters and numbers. The stroke widths are thick enough to hold up in a variety of display uses.

Kotori Rose

Kotori Rose is a fun geometric sans serif typeface that can work for display or slightly smaller blocks of text. It has bold letterforms and includes upper- and lowercase letters, numerals and punctuation.

Lash

Lash is a display typeface in a rough style with an extra-high x-height. It includes sharp edges in two styles with an uppercase character set, numbers and punctuation.

Megan June

Megan June is a full collection of characters in a thin style. Use it as an uppercase font for display or use lowercase as well for blocks of text. The simple strokes are highly readable.

Quiet Meows

Quiet Meows is something fun for all the cat lovers out there. The funky font replaces some characters with cats for a silly style. Use it for your feline-fab friends.

Sunset Beach

Sunset Beach is a modern script with swashes. It includes a full character set without numerals. There are also ligature options and some extended symbols.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The post What’s New for Designers, June 2018 appeared first on .

from https://ihelpsell.net/whats-new-for-designers-june-2018/

0 notes

webbygraphic001 · 7 years ago

Text

What’s New for Designers, June 2018

No summertime blues here. With so many new tools, the dog days of summer will be filled with playing with new elements and expanding your design portfolio.

Cool Backgrounds

Record Label Logos

Beagle

Priority Nav Scroller

Codacy

Bokeh Effect

Rainbow Hover Buttons

Rainbow Hover Buttons are a groovy little bit of code that creates a fun hover state for clickable elements. Check out the code from Varun Vachhar.

Critters

Solna

Fathom Analytics

Wallpaper Generator

Wallpaper Generator is a simple tool to create different wallpaper and background patterns. Just toggle the controls in the pen by Tim Severien to create something for your project.

Goat

Roast

Wired Elements

Optic

Lord Icon

12 Languages Icons

12 Languages is an icon shot that shows personas to match languages in your design. Each illustration is featured in a simple cartoon style.

Clothes & Shopping Icons

Clothes & Shopping Icons is a set of line-style vectors that could work great for online shops or ecommerce. Each icon file comes in multiple file formats for ease of use and quick customization.

Libmoji

Winds

Tutorial: 1 Element CSS Rainbow Gradient Infinity

Tutorial: Building a Responsive Image

Cannes

Cannes is an art-deco style typeface with neat ligatures. This display typeface includes a modern stroke style and is free for personal and commercial use.

Delicious Adventures

Kotori Rose

Lash

Lash is a display typeface in a rough style with an extra-high x-height. It includes sharp edges in two styles with an uppercase character set, numbers and punctuation.

Megan June

Megan June is a full collection of characters in a thin style. Use it as an uppercase font for display or use lowercase as well for blocks of text. The simple strokes are highly readable.

Quiet Meows

Quiet Meows is something fun for all the cat lovers out there. The funky font replaces some characters with cats for a silly style. Use it for your feline-fab friends.

Sunset Beach

Sunset Beach is a modern script with swashes. It includes a full character set without numerals. There are also ligature options and some extended symbols.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source from Webdesigner Depot https://ift.tt/2LVNdLe from Blogger https://ift.tt/2JYkeJD

#Blogger

0 notes

file-formats-programming · 8 years ago

Text

Add Sections in Presentation & Render Slide Comments When Saving as Image, PDF & HTML using .NET

What's New in this Release?

Aspose team is happy to share the announcement of Aspose.Slides for .NET 17.5.0. It has added some new features related to improved Header/Footer support and HTML export options in this release. This release has improved the Header/Footer support in Aspose.Slides and now users can set Header/Footer on individual slides level for normal slides, layout slides and master slides. It is pertinent to mention that if Header/Footer is defined on Master slide level then every layout slides and their respective normal slides shall inherit the same Header/Footer properties. Please visit documentation articles, Setting Footer Visibility inside Slide and Setting Child Footer Visibility inside Slide for further details. It has also improved the HTML export for presentation by providing custom controller to embed fonts. Users can also export the slides to SVG by setting custom shape IDs that can be used by developers in their processing of exported SVG. This release has improved presentation rendering support in this API and have rectified issues related to text, images, charts and other shapes rendering inside exported TIFF, PDF and slide thumbnails. It has also addressed the issues related to text in saved presentations including text height getting changed issue and broken text issue inside paragraphs. It has improved the charting support and have resolved issues related to adding Doughnut charts. This release has also resolved the issues related to presentation access and saving which earlier resulted in different exceptions like, ArgumentNullException, NullReferenceException and NullPointerException. This list of new, improved and bug fixes in this release are given below

Size of SWF generated is too high

PowerPoint to SVG with shape ID Investigation

Implement using HeaderFooterManager for slide/master/layout

Exception on saving presentation

Exported file cannot be opened via Aspose.Slides

Exception on converting PPTX to PDF

PPTX not converted properly to tiff

Incorrect Presentation instantiating with empty string password

PPT not converted properly to PDF

Text changed to asterisk

Changes in Workbook doesn't get saved

PPT to tiff not properly converted

Conversion to PDF with low quality of images

Adding Doughnut chart from scratch does not work

PPT not converted properly to PDF

Zoom problem in generated presentation

Images are not properly generated from PPT

Text are changed after saving PPT

Text becomes shorter after saving PPT

PPT changed after saving

Problems editing chart after saving PPTX

Table width is changed after saving file

Incorrect font when rendering to HTML

Footer is not working properly

Footer failed to apply in presentation

Text gets bigger

Other most recent bug fixes are also included in this release

Newly added documentation pages and articles

Some new tips and articles have now been added into Aspose.Slides for Java documentation that may guide users briefly how to use Aspose.Slides for performing different tasks like the followings.

Setting Footer Visibility Inside Slide

Generating an SVG with Custom Shape IDS

Overview: Aspose.Slides for .NET

Aspose.Slides is a .NET component to read, write and modify a PowerPoint document without using MS PowerPoint. PowerPoint versions from 97-2007 and all three PowerPoint formats: PPT, POT, PPS are also supported. Now users can create, access, copy, clone, edit and delete slides in their presentations. Other features include saving PowerPoint slides into PDF, adding & modifying audio & video frames, using shapes like rectangles or ellipses and saving presentations in SVG format, streams or images.

More about Aspose.Slides for .NET

Homepage of Aspose.Slides for .NET

Downlaod of Aspose.Slides for .NET

Online documentation of Aspose.Slides for .NET

#Convert Presentation to HTML #Presentation to SWF conversion #convert slide to SVG #Preserve presentation original date #presentation sections creation #.NET PPT API #.NET PowerPoint API

0 notes

suzanneshannon · 6 years ago

Text

Five Methods for Five-Star Ratings

In the world of likes and social statistics, reviews are very important method for leaving feedback. Users often like to know the opinions of others before deciding on items to purchase themselves, or even articles to read, movies to see, or restaurants to dine.

Developers often struggle with with reviews — it is common to see inaccessible and over-complicated implementations. Hey, CSS-Tricks has a snippet for one that’s now bordering on a decade.

Let’s walk through new, accessible and maintainable approaches for this classic design pattern. Our goal will be to define the requirements and then take a journey on the thought-process and considerations for how to implement them.

Scoping the work

Did you know that using stars as a rating dates all the way back to 1844 when they were first used to rate restaurants in Murray's Handbooks for Travellers — and later popularized by Michelin Guides in 1931 as a three-star system? There’s a lot of history there, so no wonder it’s something we’re used to seeing!

There are a couple of good reasons why they’ve stood the test of time:

Clear visuals (in the form of five hollow or filled stars in a row)

A straightforward label (that provides an accessible description, like aria-label)

When we implement it on the web, it is important that we focus meeting both of those outcomes.

It is also important to implement features like this in the most versatile way possible. That means we should reach for HTML and CSS as much as possible and try to avoid JavaScript where we can. And that’s because:

JavaScript solutions will always differ per framework. Patterns that are typical in vanilla JavaScript might be anti-patterns in frameworks (e.g. React prohibits direct document manipulation).

Languages like JavaScript evolve fast, which is great for community, but not so great articles like this. We want a solution that’s maintainable and relevant for the long haul, so we should base our decisions on consistent, stable tooling.

Methods for creating the visuals

One of the many wonderful things about CSS is that there are often many ways to write the same thing. Well, the same thing goes for how we can tackle drawing stars. There are five options that I see:

Using an image file

Using a background image

Using SVG to draw the shape

Using CSS to draw the shape

Using Unicode symbols

Which one to choose? It depends. Let's check them all out.

Method 1: Using an image file

Using images means creating elements — at least 5 of them to be exact. Even if we’re calling the same image file for each star in a five-star rating, that’s five total requests. What are the consequences of that?

More DOM nodes make document structure more complex, which could cause a slower page paint. The elements themselves need to render as well, which means either the server response time (if SSR) or the main thread generation (if we’re working in a SPA) has to increase. That doesn’t even account for the rendering logic that has to be implemented.

It does not handle fractional ratings, say 2.3 stars out of 5. That would require a second group of duplicated elements masked with clip-path on top of them. This increases the document’s complexity by a minimum of seven more DOM nodes, and potentially tens of additional CSS property declarations.

Optimized performance ought to consider how images are loaded and implementing something like lazy-loading) for off-screen images becomes increasingly harder when repeated elements like this are added to the mix.

It makes a request, which means that caching TTLs should be configured in order to achieve an instantaneous second image load. However, even if this is configured correctly, the first load will still suffer because TTFB awaits from the server. Prefetch, pre-connect techniques or the service-worker should be considered in order to optimize the first load of the image.

It creates minimum of five non-meaningful elements for a screen reader. As we discussed earlier, the label is more important than the image itself. There is no reason to leave them in the DOM because they add no meaning to the rating — they are just a common visual.

The images might be a part of manageable media, which means content managers will be able to change the star appearance at any time, even if it’s incorrect.

It allows for a versatile appearance of the star, however the active state might only be similar to the initial state. It’s not possible to change the image src attribute without JavaScript and that’s something we’re trying to avoid.

Wondering how the HTML structure might look? Probably something like this:

In order to change the appearance of those stars, we can use multiple CSS properties. For example:

.Rating--Star { filter: grayscale(100%); // maybe we want stars to become grey if inactive opacity: .3; // maybe we want stars to become opaque }

An additional benefit of this method is that the <img> element is set to inline-block by default, so it takes a little bit less styling to position them in a single line.

Accessibility: ★★☆☆☆ Management: ★★★★☆ Performance: ★☆☆☆☆ Maintenance: ★★★★☆ Overall: ★★☆☆☆

Method 2: Using a background image

This was once a fairly common implementation. That said, it still has its pros and cons.

For example:

Sure, it’s only a single server request which alleviates a lot of caching needs. At the same time, we now have to wait for three additional events before displaying the stars: That would be (1) the CSS to download, (2) the CSSOM to parse, and (3) the image itself to download.

It’s super easy to change the state of a star from empty to filled since all we’re really doing is changing the position of a background image. However, having to crack open an image editor and re-upload the file anytime a change is needed in the actual appearance of the stars is not the most ideal thing as far as maintenance goes.

We can use CSS properties like background-repeat property and clip-path to reduce the number of DOM nodes. We could, in a sense, use a single element to make this work. On the other hand, it’s not great that we don’t technically have good accessible markup to identify the images to screen readers and have the stars be recognized as inputs. Well, not easily.

In my opinion, background images are probably best used complex star appearances where neither CSS not SVG suffice to get the exact styling down. Otherwise, using background images still presents a lot of compromises.

Accessibility: ★★★☆☆ Management: ★★★★☆ Performance: ★★☆☆☆ Maintenance: ★★★☆☆ Overall: ★★★☆☆

Method 3: Using SVG to draw the shape

SVG is great! It has a lot of the same custom drawing benefits as raster images but doesn’t require a server call if it’s inlined because, well, it’s simply code!

We could inline five stars into HTML, but we can do better than that, right? Chris has shown us a nice approach that allows us to provide the SVG markup for a single shape as a <symbol> and call it multiple times with with <use>.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="star" viewBox="214.7 0 182.6 792">  </symbol> </svg>  <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg> <svg class="icon"> <use xlink:href="#star" /> </svg>

What are the benefits? Well, we’re talking zero requests, cleaner HTML, no worries about pixelation, and accessible attributes right out of the box. Plus, we’ve got the flexibility to use the stars anywhere and the scale to use them as many times as we want with no additional penalties on performance. Score!

The ultimate benefit is that this doesn’t require additional overhead, either. For example, we don’t need a build process to make this happen and there’s no reliance on additional image editing software to make further changes down the road (though, let’s be honest, it does help).

Accessibility: ★★★★★ Management: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★★★☆ Overall: ★★★★☆

Method 4: Using CSS to draw the shape

This method is very similar to background-image method, though improves on it by optimizing drawing the shape with CSS properties rather than making a call for an image. We might think of CSS as styling elements with borders, fonts and other stuff, but it’s capable of producing ome pretty complex artwork as well. Just look at Diana Smith’s now-famous “Francine" portrait.

Francine, a CSS replica of an oil painting done in CSS by Diana Smith (Source)

We’re not going to get that crazy, but you can see where we’re going with this. In fact, there’s already a nice demo of a CSS star shape right here on CSS-Tricks.

See the Pen Five stars! by Geoff Graham (@geoffgraham) on CodePen.

Or, hey, we can get a little more crafty by using the clip-path property to draw a five-point polygon. Even less CSS! But, buyer beware, because your cross-browser support mileage may vary.

See the Pen 5 Clipped Stars! by Geoff Graham (@geoffgraham) on CodePen.

Accessibility: ★★★★★ Manangement: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★☆☆☆ Overall: ★★★☆☆

Method 5: Using Unicode symbols

This method is very nice, but very limited in terms of appearance. Why? Because the appearance of the star is set in stone as a Unicode character. But, hey, there are variations for a filled star (★) and an empty star (☆) which is exactly what we need!

Unicode characters are something you can either copy and paste directly into the HTML:

See the Pen Unicode Stars! by Geoff Graham (@geoffgraham) on CodePen.

We can use font, color, width, height, and other properties to size and style things up a bit, but not a whole lot of flexibility here. But this is perhaps the most basic HTML approach of the bunch that it almost seems too obvious.

Instead, we can move the content into the CSS as a pseudo-element. That unleashes additional styling capabilities, including using custom properties to fill the stars fractionally:

See the Pen Tiny but accessible 5 star rating by Fred Genkin (@FredGenkin) on CodePen.

Let’s break this last example down a bit more because it winds up taking the best benefits from other methods and splices them into a single solution with very little drawback while meeting all of our requirements.

Let's start with HTML. there’s a single element that makes no calls to the server while maintaining accessibility:

As you may see, the rating value is passed as an inlined custom CSS property (--rating). This means there is no additional rendering logic required, except for displaying the same rating value in the label for better accessibility.

Let’s take a look at that custom property. It’s actually a conversion from a value value to a percentage that’s handled in the CSS using the calc() function:

--percent: calc(var(--rating) / 5 * 100%);

I chose to go this route because CSS properties — like width and linear-gradient — do not accept <number> values. They accept <length> and <percentage> instead and have specific units in them, like % and px, em. Initially, the rating value is a float, which is a <number> type. Using this conversion helps ensure we can use the values in a number of ways.

Filling the stars may sound tough, but turns out to be quite simple. We need a linear-gradient background to create hard color stops where the gold-colored fill should end:

background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent) );

Note that I am using custom variables for colors because I want the styles to be easily adjustable. Because custom properties are inherited from the parent elements styles, you can define them once on the :root element and then override in an element wrapper. Here’s what I put in the root:

:root { --star-size: 60px; --star-color: #fff; --star-background: #fc0; }

The last thing I did was clip the background to the shape of the text so that the background gradient takes the shape of the stars. Think of the Unicode stars as stencils that we use to cut out the shape of stars from the background color. Or like a cookie cutters in the shape of stars that are mashed right into the dough:

-webkit-background-clip: text; -webkit-text-fill-color: transparent;

The browser support for background clipping and text fills is pretty darn good. IE11 is the only holdout.

Accessibility: ★★★★★ Management: ★★☆☆☆ Performance: ★★★★★ Maintenance: ★★★★★ Overall: ★★★★★

Final thoughts

Image Files Background Image SVG CSS Shapes Unicode Symbols Accessibility ★★☆☆☆ ★★★☆☆ ★★★★★ ★★★★★ ★★★★★ Management ★★★★☆ ★★★★☆ ★★☆☆☆ ★★☆☆☆ ★★☆☆☆ Performance ★☆☆☆☆ ★★☆☆☆ ★★★★★ ★★★★★ ★★★★★ Maintenance ★★★★☆ ★★★☆☆ ★★★★☆ ★★☆☆☆ ★★★★★ Overall ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★☆☆ ★★★★★

Of the five methods we covered, two are my favorites: using SVG (Method 3) and using Unicode characters in pseudo-elements (Method 5). There are definitely use cases where a background image makes a lot of sense, but that seems best evaluated case-by-case as opposed to a go-to solution.

You have to always consider all the benefits and downsides of a specific method. This is, in my opinion, is the beauty of front-end development! There are multiple ways to go, and proper experience is required to implement features efficiently.

The post Five Methods for Five-Star Ratings appeared first on CSS-Tricks.

Five Methods for Five-Star Ratings published first on https://deskbysnafu.tumblr.com/

0 notes

holytheoristtastemaker · 5 years ago

Link

Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance for single, multiple, and disabled selectelements across the top browsers.

A few properties and techniques our solution will use:

clip-path to create the custom dropdown arrow

CSS grid layout to align the native select and arrow

custom CSS variables for flexible styling

em units for relative sizing

Common Issues with Native Selects

As with all form field types, <select> varies across browsers in its initial appearance.

From left to right, here is the initial appearance for <select> in Firefox, Chrome, and Safari:

The differences include box size, font-size, line-height, and most standout is the difference in how the dropdown indicator is styled.

Our goal is to create the same initial appearance across these browsers, inclusive of multiple selects, and disabled states.

Note: The dropdown list is still not stylable, so once the <select> is opened, it will still pick up the individual browser's styles for the option list. This is ok - we can deal with that to retain the free accessibility of a native select!

Base HTML

We'll focus on a single <select> to begin.

<label for="standard-select">Standard Select</label> <div class="select"> <select id="standard-select"> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option length">Option that has too long of a value to fit</option> </select> </div>

The label is not part of our styling exercise, but its included as a general requirement, notably with the for attribute having the value of the id on the <select>.

To accomplish our custom styles, we've wrapped the native select in an extra div with class of select for simplicity in this tutorial.

Reset and Remove Inherited Styles

As is included in all my tutorials as a modern best practice, we add the following reset first:

*, *::before, *::after { box-sizing: border-box; }

Following that, we can begin the rule for the native select and apply the following to rest its appearance:

select { // A reset of styles, including removing the default dropdown arrow appearance: none; // Additional resets for further consistency background-color: transparent; border: none; padding: 0 1em 0 0; margin: 0; width: 100%; font-family: inherit; font-size: inherit; cursor: inherit; line-height: inherit; }

While most of those are likely familiar, the oddball out is appearance. This is an infrequently used property and you'll note that it is not quite where we'd like it for support, but what it's primarily providing for us in this instance is the removal of the native browser dropdown arrow.

Note: The CodePen is set up to use autoprefixer which will add required pre-fixed versions of the appearance property. You may need to specifically set this up for your project, or manually add them. My HTML / Sass Jumpstart includes autoprefixer as part of the production build.

The good news is, we can add one more rule to gain removal of the arrow for lower IE versions if you need it:

select::-ms-expand { display: none; }

This tip found in the excellent article from Filament Group that shows an alternate method to create select styles.

The last part is to remove the default outline. Don't worry - we'll add a replacement later on for the :focus state!

select { // ...existing styles outline: none;

And here's a gif of our progress. You can see there is now zero visual indication that this is a select prior to clicking on it:

Custom Select Box Styles

First, let's set up some CSS variables. This will allow our select to be flexibly re-colored such as to represent an error state.

:root { --select-border: #777; --select-focus: blue; --select-arrow: var(--select-border); }

Accessibility note: As a user interface element, the select border must have a 3:1 contrast or greater against the surrounding surface color.

Now it's time to create the custom select styles which we will apply to the our wrapping div.select:

.select { width: 100%; min-width: 15ch; max-width: 30ch; border: 1px solid var(--select-border); border-radius: 0.25em; padding: 0.25em 0.5em; font-size: 1.25rem; cursor: pointer; line-height: 1.1; background-color: #fff; background-image: linear-gradient(to top, #f9f9f9, #fff 33%); }

First, we set up some width constraints. The min-width and max-width values are mostly for this demo, and you may choose to drop or alter it for your use case.

Then we apply some box model properties, including border, border-radius, and padding. Note the use of the em unit which will keep these properties proportional to the set font-size.

In the reset styles, we set several properties to inherit, so here we define those, including font-size, cursor, and line-height.

Finally, we supply it background properties, including a gradient for the slightest bit of dimension. If you remove the background properties, the select will be transparent and pick up the page background. This may be desirable, however, be aware and test the effects on contrast.

And here's our progress:

Custom Select Dropdown Arrow

For our dropdown arrow, we are going to use one of the most exciting modern CSS properties: clip-path.

Clip paths let us make all kind of shapes by "clipping" the otherwise square and rectangle shapes we receive as defaults from most elements. I had fun using clip-path on my recent portfolio site redesign.

Prior to clip-path having better support, alternative methods included:

background-image - typically a png, slightly more modern would be an SVG

an inline SVG as an additional element

the border trick to create a triangle

SVG may feel like the optimal solution, however when used as a background-imageit loses the ability to act like an icon in the sense of not being able to alter its properties such as fill color without redefining it entirely. This means we cannot use our CSS custom variable.

Placing an SVG inline solves the fill color issue, however it means including one more element every time a <select> is defined.

With clip-path, we get a crisp, scalable arrow "graphic" that feels like an SVG but with the benefits of being able to use our custom variable and being contained in the style vs. the HTML markup.

To create the arrow, we will define it as an ::after pseudo-element.

.select::after { content: ""; width: 0.8em; height: 0.5em; background-color: var(--select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%); }

The clip-path syntax is a little strange, and since it's not really the focus of this article, I recommend the following resources:

Colby Fayock explans the syntax with an example in this egghead video

Clippy is an online tool that allows you to select a shape and adjust the points while dynamically generating the clip-path CSS

If you're following along, you may have noticed the arrow is not appearing despite defining width and height. When inspected, its found that the ::after is not actually being allowed it's width.

We will resolve this by updating our .select to use CSS grid layout.

.select { // ...existing styles display: grid; }

This lets the arrow appear by essentially extending it a display value akin to "block".

At this stage we can verify that we have indeed created a triangle.

To fix the alignment, we'll use my favorite CSS grid hack (old hat to you if you've read a few articles around here!).

Old CSS solution: position: absolute New CSS solution: A single grid-template-areas to contain them all

First we'll define our area, then define that the select and the ::after both use it. The name is scoped to the element its created for, and we'll keep it easy by calling it "select":

.select { // ...existing styles grid-template-areas: "select"; } select, .select:after { grid-area: select; }

Which gives us an overlap of the arrow above the native select due to stacking context via source order:

We can now use grid properties to finalize the alignment of each element:

.select { // ...existing styles align-items: center; } .select:after { // ...existing styles justify-self: end; }

Ta-da!

:focus State

Oh yeah - remember how we removed the outline? We need to resolve the missing :focus state from dropping that.

There is an upcoming property we could use called :focus-within but it's still best to include a polyfill for it at this time.

For this tutorial, we'll use an alternate method that achieves the same result, just a bit heftier.

Unfortunately, this means we need to add one more element into the DOM.

After the native select element, as the last child within .select, add:

Why after? Because since this is a pure CSS solution, placing it after the native select means we can alter it when the select is focused by use of the adjacent sibling selector - +.

This allows us to create the following rule:

select:focus + .focus { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border: 2px solid var(--select-focus); border-radius: inherit; }

You may be wondering why we're back to position: absolute after just learning the previous grid-area hack.

The reason is to avoid recalculating adjustments based on padding. If you try it on your own, you'll see that even setting width and height to 100% still makes it sit within the padding.

The job position: absolute does best is matching the size of an element. We're pulling it an extra pixel in each direction to make sure it overlaps the border property.

But, we need to make one more addition to .select to ensure that it's relative to our select by - well, position: relative.

.select { // ...existing styles position: relative;

And here's our custom select all together as seen in Chrome:

Multiple Select

Selects come in a second flavor, which allows a user to select more than one option. From the HTML perspective, this simply means add the multipleattribute, but we'll also add a class to help create style adjustments called select--multiple:

<label for="multi-select">Multiple Select</label> <div class="select select--multiple"> <select id="multi-select" multiple> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> <option value="Option 3">Option 3</option> <option value="Option 4">Option 4</option> <option value="Option 5">Option 5</option> <option value="Option length">Option that has too long of a value to fit</option> </select> <span class="focus"></span> </div>

And looking at it, we can see it's inherited most of our styles favorably, except we don't need the arrow in this view.

This is a quick fix to adjust our selector that defines the arrow. We use :not() to exclude our newly defined class:

.select:not(.select--multiple)::after

We have a couple of minor adjustments to make for the multiple select, the first is removing padding that was previously added to make room for the arrow:

select[multiple] { padding-right: 0; }

By default, options with a long value will overflow visible area and be clipped, but I found that the main browsers allow the wrapping to be overridden if you desire:

select[multiple] option { white-space: normal; }

Optionally, we can set a height on the select to bring a bit more reliable cross-browser behavior. Through testing this, I learned that Chrome and Firefox will show a partial option, but Safari will completely hide an option that is not able to be fully in view.

The height must be set directly on the native select. Given our other styles, the value 6rem will be able to show 3 options:

select[multiple] { // ...existing styles height: 6rem; }

At this point, due to current browser support, we have made as much adjustments as we are able.

The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this.

:disabled Styles

While I would advocate for simply not showing disabled controls, we should prepare the styles for that state just to cover our bases.

To emphasis the disabled state, we want to apply a greyed background. But since we've set background styles on .select and there isn't a :parent selector, we need to create one last class to handle for this state:

.select--disabled { cursor: not-allowed; background-color: #eee; background-image: linear-gradient(to top, #ddd, #eee 33%); }

Here we've updated the cursor as an extra hint that the field cannot be interacted with, and updated the background values we previously set to be white to now be more grey for the disabled state.

This results in the following appearances:

Demo

You can test it for yourself, but here's a preview of the full solution across (from left) the Firefox, Chrome, and Safari:

0 notes

suzanneshannon · 6 years ago

Text

Making a Chart? Try Using Mobx State Tree to Power the Data

Who loves charts? Everyone, right? There are lots of ways to create them, including a number of libraries. There’s D3.js, Chart.js, amCharts, Highcharts, and Chartist, to name only a few of many, many options.

But we don’t necessary need a chart library to create charts. Take Mobx-state-tree (MST), an intuitive alternative to Redux for managing state in React. We can build an interactive custom chart with simple SVG elements, using MST to manage and manipulate data for the chart. If you've attempted to build charts using something like D3.js in the past, I think you’ll find this approach more intuitive. Even if you're an experienced D3.js developer, I still think you'll be interested to see how powerful MST can be as a data architecture for visualizations.

Here’s an example of MST being used to power a chart:

This example uses D3's scale functions but the chart itself is rendered simply using SVG elements within JSX. I don’t know of any chart library that has an option for flashing hamster points so this is a great example of why it’s great to build your own charts — and it’s not as hard as you might think!

I’ve been building charts with D3 for over 10 years and, while I love how powerful it is, I’ve always found that my code can end up being unwieldy and hard to maintain, especially when working with complex visualizations. MST has changed all that completely by providing an elegant way to separate the data handling from the rendering. My hope for this article is that it will encourage you to give it a spin.

Getting familiar with MST model

First of all, let’s cover a quick overview of what a MST model looks like. This isn’t an in-depth tutorial on all things MST. I only want to show the basics because, really, that’s all you need about 90% of the time.

Below is a Sandbox with the code for a simple to-do list built in MST. Take a quick look and then I’ve explain what each section does.

First of all, the shape of the object is defined with typed definitions of the attribute of the model. In plain English, this means an instance of the to-do model must have a title, which must be a string and will default to having a “done” attribute of false.

.model("Todo", { title: types.string, done: false //this is equivalent to types.boolean that defaults to false })

Next, we have the view and action functions. View functions are ways to access calculated values based on data within the model without making any changes to the data held by the model. You can think of them as read-only functions.

.views(self => ({ outstandingTodoCount() { return self.todos.length - self.todos.filter(t => t.done).length; } }))

Action functions, on the other hand, allow us to safely update the data. This is always done in the background in a non-mutable way.

.actions(self => ({ addTodo(title) { self.todos.push({ id: Math.random(), title }); } }));

Finally, we create a new instance of the store:

const todoStore = TodoStore.create({ todos: [ { title: "foo", done: false } ] });

To show the store in action, I’ve added a couple of console logs to show the output of outStandingTodoCount() before and after triggering the toggle function of the first instance of a Todo.

console.log(todoStore.outstandingTodoCount()); // outputs: 1 todoStore.todos[0].toggle(); console.log(todoStore.outstandingTodoCount()); // outputs: 0

As you can see, MST gives us a data structure that allows us to easily access and manipulate data. More importantly, it’s structure is very intuitive and the code is easy to read at a glance — not a reducer in sight!

Let’s make a React chart component

OK, so now that we have a bit of background on what MST looks like, let’s use it to create a store that manages data for a chart. We’ll will start with the chart JSX, though, because it’s much easier to build the store once you know what data is needed.

Let’s look at the JSX which renders the chart.

The first thing to note is that we are using styled-components to organize our CSS. If that’s new to you, Cliff Hall has a great post that shows it in use with a React app.

First of all, we are rendering the dropdown that will change the chart axes. This is a fairly simple HTML dropdown wrapped in a styled component. The thing to note is that this is a controlled input, with the state set using the selectedAxes value from our model (we’ll look at this later).

<select onChange={e => model.setSelectedAxes(parseInt(e.target.value, 10)) } defaultValue={model.selectedAxes} >

Next, we have the chart itself. I’ve split up the axes and points in to their own components, which live in a separate file. This really helps keep the code maintainable by keeping each file nice and small. Additionally, it means we can reuse the axes if we want to, say, have a line chart instead of points. This really pays off when working on large projects with multiple types of chart. It also makes it easy to test the components in isolation, both programmatically and manually within a living style guide.

{model.ready ? ( <div> <Axes yTicks={model.getYAxis()} xTicks={model.getXAxis()} xLabel={xAxisLabels[model.selectedAxes]} yLabel={yAxisLabels[model.selectedAxes]} ></Axes> <Points points={model.getPoints()}></Points> </div> ) : ( <Loading></Loading> )}

Try commenting out the axes and points components in the Sandbox above to see how they work independently of each other.

Lastly, we’ll wrap the component with an observer function. This means that any changes in the model will trigger a re-render.

export default observer(HeartrateChart);

Let’s take a look at the Axes component:

As you can see, we have an XAxis and a YAxis. Each has a label and a set of tick marks. We go into how the marks are created later, but here you should note that each axis is made up of a set of ticks, generated by mapping over an array of objects with a label and either an x or y value, depending on which axis we are rendering.

Try changing some of the attribute values for the elements and see what happens… or breaks! For example, change the line element in the YAxis to the following:

The best way to learn how to build visuals with SVG is simply to experiment and break things. 🙂

OK, that’s half of the chart. Now we’ll look at the Points component.

Each point on the chart is composed of two things: an SVG image and a circle element. The image is the animal icon and the circle provides the pulse animation that is visible when mousing over the icon.

Try commenting out the image element and then the circle element to see what happens.

This time the model has to provide an array of point objects which gives us four properties: x and y values used to position the point on the graph, a label for the point (the name of the animal) and pulse, which is the duration of the pulse animation for each animal icon. Hopefully this all seems intuitive and logical.

Again, try fiddling with attribute values to see what changes and breaks. You can try setting the y attribute of the image to 0. Trust me, this is a much less intimidating way to learn than reading the W3C specification for an SVG image element!

Hopefully this gives you an understanding and feel for how we are rendering the chart in React. Now, it’s just a case of creating a model with the appropriate actions to generate the points and ticks data we need to loop over in JSX.

Creating our store

Here is the complete code for the store:

I’ll break down the code into the three parts mentioned earlier:

Defining the attributes of the model

Defining the actions

Defining the views

Defining the attributes of the model

Everything we define here is accessible externally as a property of the instance of the model and — if using an observable wrapped component — any changes to these properties will trigger a re-render.

.model('ChartModel', { animals: types.array(AnimalModel), paddingAndMargins: types.frozen({ paddingX: 30, paddingRight: 0, marginX: 30, marginY: 30, marginTop: 30, chartHeight: 500 }), ready: false, // means a types.boolean that defaults to false selectedAxes: 0 // means a types.number that defaults to 0 })

Each animal has four data points: name (Creature), longevity (Longevity__Years_), weight (Mass__grams_), and resting heart rate (Resting_Heart_Rate__BPM_).

const AnimalModel = types.model('AnimalModel', { Creature: types.string, Longevity__Years_: types.number, Mass__grams_: types.number, Resting_Heart_Rate__BPM_: types.number });

Defining the actions

We only have two actions. The first (setSelectedAxes ) is called when changing the dropdown menu, which updates the selectedAxes attribute which, in turn, dictates what data gets used to render the axes.

setSelectedAxes(val) { self.selectedAxes = val; },

The setUpScales action requires a bit more explanation. This function is called just after the chart component mounts, within a useEffect hook function, or after the window is resized. It accepts an object with the width of the DOM that contains the element. This allows us to set up the scale functions for each axis to fill the full available width. I will explain the scale functions shortly.

In order to set up scale functions, we need to calculate the maximum value for each data type, so the first thing we do is loop over the animals to calculate these maximum and minimum values. We can use zero as the minimum value for any scale we want to start at zero.

// ... self.animals.forEach( ({ Creature, Longevity__Years_, Mass__grams_, Resting_Heart_Rate__BPM_, ...rest }) => { maxHeartrate = Math.max( maxHeartrate, parseInt(Resting_Heart_Rate__BPM_, 10) ); maxLongevity = Math.max( maxLongevity, parseInt(Longevity__Years_, 10) ); maxWeight = Math.max(maxWeight, parseInt(Mass__grams_, 10)); minWeight = minWeight === 0 ? parseInt(Mass__grams_, 10) : Math.min(minWeight, parseInt(Mass__grams_, 10)); } ); // ...

Now to set up the scale functions! Here, we’ll be using the scaleLinear and scaleLog functions from D3.js. When setting these up, we specify the domain, which is the minimum and maximum input the functions can expect, and the range, which is the maximum and minimum output.

For example, when I call self.heartScaleY with the maxHeartrate value, the output will be equal to marginTop. That makes sense because this will be at the very top of the chart. For the longevity attribute, we need to have two scale functions since this data will appear on either the x- or the y-axis, depending on which dropdown option is chosen.

self.heartScaleY = scaleLinear() .domain([maxHeartrate, minHeartrate]) .range([marginTop, chartHeight - marginY - marginTop]); self.longevityScaleX = scaleLinear() .domain([minLongevity, maxLongevity]) .range([paddingX + marginY, width - marginX - paddingX - paddingRight]); self.longevityScaleY = scaleLinear() .domain([maxLongevity, minLongevity]) .range([marginTop, chartHeight - marginY - marginTop]); self.weightScaleX = scaleLog() .base(2) .domain([minWeight, maxWeight]) .range([paddingX + marginY, width - marginX - paddingX - paddingRight]);

Finally, we set self.ready to be true since the chart is ready to render.

Defining the views

We have two sets of functions for the views. The first set outputs the data needed to render the axis ticks (I said we’d get there!) and the second set outputs the data needed to render the points. We’ll take a look at the tick functions first.

There are only two tick functions that are called from the React app: getXAxis and getYAxis. These simply return the output of other view functions depending on the value of self.selectedAxes.

getXAxis() { switch (self.selectedAxes) { case 0: return self.longevityXAxis; break; case 1: case 2: return self.weightXAxis; break; } }, getYAxis() { switch (self.selectedAxes) { case 0: case 1: return self.heartYAxis; break; case 2: return self.longevityYAxis; break; } },

If we take a look at the Axis functions themselves we can see they use a ticks method of the scale function. This returns an array of numbers suitable for an axis. We then map over the values to return the data we need for our axis component.

heartYAxis() { return self.heartScaleY.ticks(10).map(val => ({ label: val, y: self.heartScaleY(val) })); } // ...

Try changing the value of the parameter for the ticks function to 5 and see how it affects the chart: self.heartScaleY.ticks(5).

Now we have the view functions to return the data needed for the Points component.

If we take a look at longevityHeartratePoints (which returns the point data for the “Longevity vs. Heart” rate chart), we can see that we are looping over the array of animals and using the appropriate scale functions to get the x and y positions for the point. For the pulse attribute, we use some maths to convert the beats per minute value of the heart rate into a value representing the duration of a single heartbeat in milliseconds.

longevityHeartratePoints() { return self.animals.map( ({ Creature, Longevity__Years_, Resting_Heart_Rate__BPM_ }) => ({ y: self.heartScaleY(Resting_Heart_Rate__BPM_), x: self.longevityScaleX(Longevity__Years_), pulse: Math.round(1000 / (Resting_Heart_Rate__BPM_ / 60)), label: Creature }) ); },

At the end of the store.js file, we need to create a Store model and then instantiate it with the raw data for the animal objects. It is a common pattern to attach all models to a parent Store model which can then be accessed through a provider at top level if needed.

const Store = types.model('Store', { chartModel: ChartModel }); const store = Store.create({ chartModel: { animals: data } }); export default store;

And that is it! Here’s our demo once again:

This is by no means the only way to organize data to build charts in JSX, but I have found it to be incredibly effective. I’ve have used this structure and stack in the wild to build a library of custom charts for a big corporate client and was blown away with how nicely MST worked for this purpose. I hope you have the same experience!

The post Making a Chart? Try Using Mobx State Tree to Power the Data appeared first on CSS-Tricks.

Making a Chart? Try Using Mobx State Tree to Power the Data published first on https://deskbysnafu.tumblr.com/

0 notes

file-formats-programming · 8 years ago

Text

Set Header/Footer on Individual Slides Level & Enhanced PPTX to PDF Conversion using .NET

What's New in this Release?

Size of SWF generated is too high

PowerPoint to SVG with shape ID Investigation

Implement using HeaderFooterManager for slide/master/layout

Exception on saving presentation

Exported file cannot be opened via Aspose.Slides

Exception on converting PPTX to PDF

PPTX not converted properly to tiff

Incorrect Presentation instantiating with empty string password

PPT not converted properly to PDF

Text changed to asterisk

Changes in Workbook doesn't get saved

PPT to tiff not properly converted

Conversion to PDF with low quality of images

Adding Doughnut chart from scratch does not work

PPT not converted properly to PDF

Zoom problem in generated presentation

Images are not properly generated from PPT

Text are changed after saving PPT

Text becomes shorter after saving PPT

PPT changed after saving

Problems editing chart after saving PPTX

Table width is changed after saving file

Incorrect font when rendering to HTML

Footer is not working properly

Footer failed to apply in presentation

Text gets bigger

Other most recent bug fixes are also included in this release

Newly added documentation pages and articles

Some new tips and articles have now been added into Aspose.Slides for Java documentation that may guide users briefly how to use Aspose.Slides for performing different tasks like the followings.

Setting Footer Visibility Inside Slide

Generating an SVG with Custom Shape IDS

Overview: Aspose.Slides for .NET

More about Aspose.Slides for .NET

Homepage of Aspose.Slides for .NET

Downlaod of Aspose.Slides for .NET

Online documentation of Aspose.Slides for .NET

#improved Header/Footer support #HTML export for presentation #export the slides to SVG #presentation rendering support #Enhanced PPTX to PDF Conversion #.NET PPT API

0 notes